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

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
19 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
20 Comment authors
abcRajkumarSilvioYogipascal makori Recent comment authors
newest oldest most voted
trackback
jQuery and Java List example

[…] Note To loop over a object array in JSON formatted string, you need to converts it to JavaScript object (with JSON.parse() or $.parseJSON()) before parse it with jQuery $.each(). See this example – JQuery Loop Over JSON String […]

Rabeet
Guest
Rabeet

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

hdpavan
Guest
hdpavan

inside for each

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

Servesh Mishra
Guest
Servesh Mishra

idx is find key or index of current element.

Rajkumar
Guest
Rajkumar

you saved my time thanks

Silvio
Guest
Silvio

Very usefull

Yogi
Guest
Yogi

Thanks you for saving a my time on this json loop with jquery each method.

pascal makori
Guest
pascal makori

Thanks guys
this worked for me.

do not used:

datatype:’json”,

use this:

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

Vishwajeet Behera
Guest
Vishwajeet Behera

Thank you…
your tutorial and example always help me out… :)

Vivek Doshi
Guest
Vivek Doshi

Great article.

Tashi Paljor
Guest
Tashi Paljor

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

Rabeet
Guest
Rabeet

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″}]”;

happy
Guest
happy

Thanks man! for saving a lot of my time with this :)

ob
Guest
ob

(Y) nice

Jian Stormborn
Guest
Jian Stormborn

Thanks man

sumit sharma
Guest
sumit sharma

Thanks mkyong you save me day… Nice article

Deepak
Guest
Deepak

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

igauravsehrawat
Guest
igauravsehrawat

you json is invalid.

abc
Guest
abc

use JSON.parse

?? ?
Guest
?? ?

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

addys
Guest
addys

This was helpful

Andrew Adcock
Guest
Andrew Adcock

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??