jquery by 21 comments

jQuery loop over JSON string – $.each example

Review a simple jQuery example to loop over a JavaScript array object.


var json = [
	{"id":"1","tagName":"apple"},
	{"id":"2","tagName":"orange"},
	{"id":"3","tagName":"banana"},
	{"id":"4","tagName":"watermelon"},
	{"id":"5","tagName":"pineapple"}
];

$.each(json, function(idx, obj) {
	alert(obj.tagName);
});

Above code snippet is working fine, prompts the “apple”, “orange” … as expected.

Problem : JSON string

Review below example, declares a JSON string (enclosed with single or double quotes) directly.


var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
	
$.each(json, function(idx, obj) {
	alert(obj.tagName);
});

In Chrome, it shows following errors in console :


Uncaught TypeError: Cannot use 'in' operator to search for '156' 
in [{"id":"1","tagName":"apple"}...

Solution : Convert JSON string to JavaScript object

To fix it, converts it to Javascript object via standard JSON.parse() or jQuery $.parseJSON.


var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
	
$.each(JSON.parse(json), function(idx, obj) {
	alert(obj.tagName);
});

//or 

$.each($.parseJSON(json), function(idx, obj) {
	alert(obj.tagName);
});
Note
Most web applications will return JSON formatted string directly, you need to convert it to JavaScript object before parse it with jQuery.

References

  1. jQuery $each() example
  2. Wikipedia : JSON

21 comments on “jQuery loop over JSON string – $.each example”

  4. Thanks guys
    this worked for me.

    do not used:

    datatype:’json”,

    use this:

    $.each($.parseJSON(json), function(key, val) {
    });

    Reply

  5. Thank you…
    your tutorial and example always help me out… 🙂

    Reply

  7. Hi Mkyong,

    I am new to JSON.

    I have following JSON converted from PHP array. Which seems to correct?

    {“”:”0″,”Trojan”:”1″,”Malware”:”3″,”Backdoor”:”6″,”Virus”:”2″,”Bot”:”5″,”Rootkit”:”7″,”Worm”:”5″}

    I want them to look like below….

    dataPoints: [
    { y: 1, indexLabel: “Trojan” },
    { y: 3, indexLabel: “Malware” },
    { y: 6 indexLabel: “Backdoor” },
    { y: 2, indexLabel: “Virus” }
    ]

    Can you guide me through the process?

    Thankx

    Reply

  8. How would i be able to parse this json in nodejs on server side, i have tried JSON.parse(data) , util.inspect(data) , JSON.parse(JSON.parse(data)), JSON.stringify but nothing worked

    Reply

  9. How can i parse this json ,

    “[{“likes_count”:”7494″,”time”:”5/8/2015″,”comments_count”:”280″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1206068869406834″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/s720x720/7106_1206068869406834_756945357918974095_n.jpg?oh=54f1aa6a2c3ed51a490e71b9463d6228&oe=55D5509D”},{“likes_count”:”11371″,”time”:”5/8/2015″,”comments_count”:”162″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205847522762302″,”pageid”:”276620012351729″,”src_big”:”https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/v/t1.0-9/11039084_1205847522762302_2271007689393357018_n.jpg?oh=83d146d7230df82ce7a5a149f5d5ef8a&oe=560C013D&__gda__=1438626742_78d8bf94c3c5f4533778daf6b65bd4f3″},{“likes_count”:”41227″,”time”:”5/8/2015″,”comments_count”:”1492″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205847306095657″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xta1/v/t1.0-9/11242428_1205847306095657_7066238614874378814_n.jpg?oh=d8eac038d295ab087d131df53ab87b0f&oe=560D062D”},{“likes_count”:”2829″,”time”:”5/8/2015″,”comments_count”:”117″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205847112762343″,”pageid”:”276620012351729″,”src_big”:”https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/11015167_1205847112762343_5768949663325437387_n.jpg?oh=2c40b3a4f8493a23b09fcee39676432b&oe=55CB1F2D&__gda__=1439430162_5958874c96ab24703595b723ce208232″},{“likes_count”:”40016″,”time”:”5/7/2015″,”comments_count”:”622″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846966095691″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xap1/t31.0-8/q82/s720x720/11182658_1205846966095691_8270738433919918204_o.jpg”},{“likes_count”:”25225″,”time”:”5/7/2015″,”comments_count”:”1127″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846782762376″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11061213_1205846782762376_7441267764992943817_n.jpg?oh=cdafebcfad56d9f17a18cd429031e7d3&oe=55D936B0″},{“likes_count”:”40506″,”time”:”5/7/2015″,”comments_count”:”1078″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846646095723″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xap1/t31.0-8/s720x720/1496494_1205846646095723_1967253009323819403_o.png”},{“likes_count”:”11827″,”time”:”5/7/2015″,”comments_count”:”295″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846409429080″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xpt1/t31.0-8/s720x720/11063644_1205846409429080_4831748512750135935_o.jpg”},{“likes_count”:”7172″,”time”:”5/7/2015″,”comments_count”:”148″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846266095761″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xtp1/t31.0-8/p180x540/11203586_1205846266095761_9032791975313656879_o.jpg”},{“likes_count”:”16014″,”time”:”5/7/2015″,”comments_count”:”520″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205846162762438″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-ash3/v/t1.0-9/s720x720/11181202_1205846162762438_3608646432882656707_n.jpg?oh=104f7950918fd6c387a4de782c2dc014&oe=55D78DCE”},{“likes_count”:”39252″,”time”:”5/7/2015″,”comments_count”:”1166″,”page”:”Men’s

    Humor”,”caption”:””,”objectid”:”1205797962767258″,”pageid”:”276620012351729″,”src_big”:”https://scontent.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/11193317_1205797962767258_2741647485185253215_n.jpg?oh=557c1a9b0aa9327665fe6bad7fec68bb&oe=55C09021″}]”;

    Reply

  10. Thanks man! for saving a lot of my time with this 🙂

    Reply

  14. Deepak, I am having a similar problem which I believe is from poorly formatted JSON. The problem is my JSON string is a return from a wordpress database. I use json_encode() to send the result string back to my ajax – so I don’t know what else I need to do to make it valid JSON??

    Reply

  15. i have used both JSON.parse and $.parseJSON ,its still not working…its throwing Uncaught SyntaxError: Unexpected token o

    Reply

  16. if the conequense isn’t expected ,but just 0,undefined ,1,undefined, …what’s the problem with it

    Reply

  17. inside for each

    function(idx, obj) what is that idx paramater do ??

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *