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.

You shouldn't use `eval()` on JSON strings. Instead you should use a JSON parser. Please see this link http://stackoverflow.com/questions/891299/browser-native-json-support-window-json for native JSON support. If it's not supported on all the browsers you want to target, then use a JavaScript based JSON parser: http://www.json.org/js.html — onteria_, May 19 '11 at 22:20

score 3 · Accepted Answer · answered May 19 '11 at 22:19

3

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?

answered May 19 '11 at 22:19

alpian

4,668
1
18
19

I need to access about 4 or 5 other properties of the `track` object in the `playTrack` function. I thought (coming from a c# background it makes sense to me) that I could pass the `track` object in rather than individual properties. – mister_b May 20 '11 at 07:56
You can still pass the track's ID to your playTrack and then look up the real track object in a dictionary keyed on ID. You cannot (obviously) "pass" an object through a String and expect to to be an object again later on. :) – alpian May 20 '11 at 08:01
I'm quite confused by this and I appreciate I may seem a little dense. If I can access `track.id` as a property of the `track` object, then surely `track` is the object itself no? How come `track` is a string if it has properties? Thanks for taking the time to respond to my stupidity :-) – mister_b May 20 '11 at 08:38
Right, I think I'm understanding this now. It's because of the context I'm using it it's getting converted to a string. For the other uses of the properties, this is fine but in the instance of the object itself, I can see how this doesn't work. – mister_b May 20 '11 at 10:01

score 3 · Answer 2 · answered May 19 '11 at 22:23

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>"
...

score 0 · Answer 3 · answered May 19 '11 at 22:20

When creating the "playTrack" onclick event, you are using the track variable in the wrong way. "track" is an object, and using it as a string will be [Object object]. So in your "html" you'll have something like onclick="playtrack([Object object])" and this is syntactically wrong.

score 0 · Answer 4 · answered May 19 '11 at 22:21

0

I'd strongly suggest the use of JSON.parse() instead of eval. Instead of building your list entries as text I'd make them as DOM objects with document.createElement() and add the click handlers as addEventListener, that way you wouldn't have the need to try to include your JS objects as text in the HTML stream.

answered May 19 '11 at 22:21

Jim Blackler

22,946
12
85
101

I'm new to javascript and interested in your approach to this, can you give me more of an indication as how I would do it this way...? – mister_b May 20 '11 at 07:58

Problem passing a JSON object to a function

4 Answers4