How to pass a javascript object using jquery to another function

Question

I have the below HTML file . I am trying to pass the item object to the javascript function : linkClickFunc so that i can process it further.

But i am unable to do it with the below syntax . Can someone please guide me as to what am i doing wrong .

    <div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

<script type="text/javascript">
function linkClickFunc(item)
{
  console.log(item);
}
</script>

<script>
$(document).ready(function(){
    CodeConfigkeys = {"ENV": [{"NAME": "Subhayan", "Values": [{"AGE": 33, "SEX": "Male"}]}, {"NAME": "Mary", "Values": [{"AGE": 29, "SEX": "Female"}]}], "DB_PARAMS": [{"NAME": "SQL_CONNECTIONS_DB", "Values": "templates"}, {"NAME": "SQL_CONNECTIONS_COLLECTION", "Values": "dbtemplates"}]};
    var html_str = "";
    $.each( CodeConfigkeys, function( key, value ){
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    value.forEach(function(item, index, array) {
    console.log(item);
    console.log (typeof item);
    html_str = html_str + "<li><a onclick=\"linkClickFunc($(" + "'" + item + "'" + "));\">" + item["NAME"] + "</a></li>";
    });
    html_str = html_str + "</div></div>";
    });
    console.log(html_str);
    $("#key-buttons").html(html_str);

});
</script>

I have searched for possible solutions on the internet but could not hit upon the right one.

Thanks in advance.

Store item in the data() on the element, then bind an unobtrusive event handler to it and read that data attribute back out. — Rory McCrossan
– Rory McCrossan, Commented May 31, 2018 at 9:50
I edited the question to give the source code. But i am not sure i followed your suggestion — Subhayan Bhattacharya
– Subhayan Bhattacharya, Commented May 31, 2018 at 9:55
If item is an object, the HTML output would be <a onclick="linkClickFunc([object Object])"></a>. You need to add an event listener for the click event. — dork
– dork, Commented May 31, 2018 at 9:56
Yes that is exactly what the error is . Forgive my lack of knowledge in this subject but isn't the function an click event listener ? — Subhayan Bhattacharya
– Subhayan Bhattacharya, Commented May 31, 2018 at 9:58
I meant programmatically, i.e. link.addEventListener('click', yourFunction). — dork
– dork, Commented May 31, 2018 at 10:03

Bhumi Shah · Accepted Answer · 2018-05-31 10:16:20Z

1

Just change your line

html_str = html_str + "<li><a onclick=\"linkClickFunc($(" + "'" + item + "'" + "));\">" + item["NAME"] + "</a></li>";

with

html_str = html_str + "<li><a onclick='linkClickFunc("+JSON.stringify(item)+")'>" + item["NAME"] + "</a></li>";

edited May 31, 2018 at 10:16

answered May 31, 2018 at 10:08

Bhumi Shah

9,50210 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Subhayan Bhattacharya Over a year ago

Thank you so much . Works perfectly.

gainbrainer Over a year ago

That is brilliant!

Nap · Accepted Answer · 2018-05-31 09:58:45Z

1

Use JSON.stringify() to pass the object as a string. Of course you need to escape the double quote to be recognize as real double quotes. JSON.stringify(item)

html_str = html_str + "<li><a onclick=\"linkClickFunc($(" + "'" + JSON.stringify(item) + "'" + "));\">" + item["NAME"] + "</a></li>";

Then for the function, parse the JSON object back to string. JSON.parse(item)

function linkClickFunc(item)
{
  var obj = JSON.parse(item);
  console.log(item);
}

I have not tested the code but you should handle double quote for string conversion and parsing.

answered May 31, 2018 at 9:58

Nap

8,33813 gold badges78 silver badges120 bronze badges

Collectives™ on Stack Overflow

How to pass a javascript object using jquery to another function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related