Problem passing a JSON object to a function

Question

I'm only just learning javascript so I imagine this is relatively simple but it's been annoying me for a while now.

I have a function that simply displays some text that I am calling from a AJAX response. Here's my code.

if(this.responseText != null)
{
    var text = "<ul>";
    var object = eval("(" + this.responseText + ")");
    var track;
    for (var i = 0; i < object.length; i++)
    {
        track = object[i];
        text += "<li><img src=\"" + track.artwork_url + "\"/>";
        text += track.title;
        text += "<ul><li><a href=\"#\" onclick=\"playTrack(" + track + ");return false;\">Play</a></li>"
        text += "<li><a href=\"" + track.download_url + "?client_id=" + clientId + "\">Download</a></li></ul>"

        text += "</li>";
    }


    text += "</ul>";

    document.getElementById("content").innerHTML = text;
}

function playTrack(track)
{
     document.getElementById("content").innerHTML = "This has worked";
}

It's not liking me passing the track object to the function playTrack (a simple function for now that just displays some text). I get the error "Uncaught SyntaxError: Unexpected identifier"

If I pass in track.id (or any other property), it all works fine which I don't understand.

Thanks for any help,

Mister B.

Answer 1

You cannot pass an object like this. track is getting converted to a string and then your playTrack function call fails because the syntax is wrong. It'll be rendered (something like onclick=playTrack([Object object]) which clearly isn't valid JavaScript). What's wrong with just passing the track.id since you know that works?

Answer 2

The @alpian and @Jim is right, you need convert the object to json string, you can use http://www.json.org/js.html to this.

...    
text += "<ul><li><a href=\"#\" onclick=\"playTrack('" + JSON.stringify(track) + "');return false;\">Play</a></li>"
...