logic to parse json data failing

Question

I have the following json data:

[{"id":"1","name":"vm"},{"id":"2","name":"live"}]

Here's the code I have to parse:

$.getJSON('<%= path to my method%>',function(data) {
    console.log(data);  
    $.each(data, function(i, item) {                      
                   console.log(item[i].id);
           console.log(item[i].name);
    }); //end .each

});//end getJSON.

Here are the results in the console:

LOG: [{"id":"1","name":"vm"},{"id":"2","name":"live"}] 
LOG: undefined 
LOG: undefined 
SCRIPT5007: Unable to get value of the property 'id': object is null or undefined

I found this post: jquery loop on Json data using $.each

and so I tried to change my code to look like:

function(data) {
    console.log(data);  
    $.each(data, function(i, item) {
         console.log(data[i].id);
             console.log(data[i].name);
    }); //end .each

and this:

function(data) {
    console.log(data);  
    $.each(data, function(i, item) {
    console.log(item.id);
    console.log(item.name);
    }); //end .each

But I keep getting undefined for the ids and names.

Can you tell me where I'm going wrong please? Thanks.

EDIT 1

function(data) {
       $.parseJSON(data);
       console.log(data);  
       $.each(data, function(i, item) {
             console.log(item.id);
             console.log(item.name);
        }); //end .each

I bet your `data` contains a string and not a javascript object. Perhaps use `data = $.parseJSON(data);` to cast the string to an object before your `console.log`'s. — phpisuber01, Jun 12 '13 at 19:07
phpisuber01, that doesnt seem to make any difference.... Please check out Edit 1 on my post to see what the code loks like — mark li, Jun 12 '13 at 19:09
@markli You didnt put `data = $.parseJSON(data)`, you omitted the `data = `. Prepend it and try again. pXL's fiddle shows it correctly. — phpisuber01, Jun 12 '13 at 19:13
phpisuber01, i had a typo / bug in my attempt to follow your solution. can you post your comment as an answer? — mark li, Jun 12 '13 at 19:15

score 1 · Answer 1 · answered Jun 12 '13 at 19:10

1

IIRC

$.each(data,function(i,item)

should be

$.each(data,function(i)

then you can just use this.id and this.name inside the loop. Even if your solution turns out to be valid, it will still be faster to use mine, because going for data[i] will be slower than just using 'this'

answered Jun 12 '13 at 19:10

Michiel Cornille

2,067
1
19
42

sorry, that doesn't fix it either. but i will use this instead of data[i] – mark li Jun 12 '13 at 19:13

score 1 · Answer 2 · answered Jun 12 '13 at 19:16

1

When you use .each, i is the index and item is the value. No need to to item[i], like you do in a for..in.

$.each(data, function(i, item) {                      
    console.log(item.id);
    console.log(item.name);
});

answered Jun 12 '13 at 19:16

gen_Eric

223,194
41
299
337

score 0 · Answer 3 · answered Jun 12 '13 at 19:19

0

Try this:

$.each(data, function() {
    console.log(this.id);
    console.log(this.name);
});

answered Jun 12 '13 at 19:19

jRoB

338
1
9

I think it is a moot point because, as one of the posters recognized, when the OP logs his json object it is coming through as a string. Shouldn't the console display it as [object][object] ? – jRoB Jun 12 '13 at 21:05

phpisuber01 · Answer 4 · 2013-06-12T19:50:13.500

0

Your JSON is coming through as a string instead of a JSON object, therefore you're not able to access its properties.

Cast the string of JSON into an actual object by using $.parseJSON().

data = $.parseJSON(data);

The above should do the trick.

If your JSON source is potentially unreliable, I would suggest try/catch blocks to prevent invalid JSON from borking your javascript:

try {
    data = $.parseJSON(data);
} catch(errors) {
    console.log(errors);
}

Finally, if you control the source of the JSON, you can set the headers in the response to application/json and jQuery should automagically cast the response to a JSON object.

edited Jun 12 '13 at 19:50

answered Jun 12 '13 at 19:22

phpisuber01

7,585
3
22
26

You mean `application/json` :-) – gen_Eric Jun 12 '13 at 19:46
@RocketHazmat Yeah! That too. I believe they are interchangeable. – phpisuber01 Jun 12 '13 at 19:47
They aren't actually. `application/javascript` and `application/json` are totally different ^_^ – gen_Eric Jun 12 '13 at 19:48
@RocketHazmat Updated answer. You are correct, I must of been thinking about JSON-P. >_> Thanks! – phpisuber01 Jun 12 '13 at 19:50

logic to parse json data failing

4 Answers4