passing json object as a javascript's function parameter

Question

i want to pass some elements of the json objects like objson.post.mypost[i].idpost as an argument in a javascript function here is my script :

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp1=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function()
{
    if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
    {
        var txttmp2 = xmlhttp1.responseText;
        var obj2 = $.parseJSON(txttmp2);
        var text1= document.getElementById("tabs-Mil");
        var objln=obj2.post.mypost.length;
        //alert(objln+"");
        for(var counter=0;counter<objln;counter++)
        {
            text1.innerHTML+=" '"+obj2.post.mypost[counter].status+"' @ <a href='#'>"+obj2.post.mypost[counter].namalokasi+"</a>&nbsp;on "+obj2.post.mypost[counter].tanggal+"<br/><a href='#' onclick='addcomment("+obj2.post.mypost[counter].idpost+","+localStorage.loggeduser+")'>comment</a><hr width='80%' align='left'><br/>";
            text1.innerHTML+="<span id='comments' name='comments'></span>";
        }
    }
 }
xmlhttp1.open("GET","http://localhost:280/finaltask/forjson.php?tmpid="+iduser+"&proses=showpost",true);
xmlhttp1.send();

function addcomment(idcheckin,iduser)
{
    $("#formcomment").show();
    var detpost=document.getElementById("detail-post");
    alert(idcheckin+"/"+iduser);
}

i have passed the json object element : onclick='addcomment("+obj2.post.mypost[counter].idpost+","+localStorage.loggeduser+")'

but when the function executed (function addcomment(idcheckin,iduser)), it's said that 'idcheckin' was 'undefined'.....

can anyone help me ?

Answer 1

Do not attach complex event handler by concating string, use library like jQuery:

$("<a></a>").text("Hello").click(function () {
    addComment(obj.post.mypost[counter].idpost, ...);
})

Answer 2

Ensure that your return results are expected. You should check that the idpost is valid, consider adding logging at the start of the loop.

    for(var counter=0;counter<objln;counter++)
    {
        console.log('loop results ' + counter + ': ' + JSON.stringify(obj2.post.mypost[counter])); // confirm output of selected element
        alert('idpost: ' + obj2.post.mypost[counter].idpost); // Check result
        text1.innerHTML+=" '"+obj2.post.mypost[counter].status+"' @ <a href='#'>"+obj2.post.mypost[counter].namalokasi+"</a>&nbsp;on "+obj2.post.mypost[counter].tanggal+"<br/><a href='#' onclick='addcomment("+obj2.post.mypost[counter].idpost+","+localStorage.loggeduser+")'>comment</a><hr width='80%' align='left'><br/>";

Also consider changing:

addcomment("+obj2.post.mypost[counter].idpost+","+localStorage.loggeduser+")

to:

addcomment(\""+obj2.post.mypost[counter].idpost+"\",\""+localStorage.loggeduser+"\")