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.
Most web applications will return JSON formatted string directly, you need to convert it to JavaScript object before parse it with jQuery.
References
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
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
Very usefull
inside for each
function(idx, obj) what is that idx paramater do ??
idx is find key or index of current element.
Thanks you for saving a my time on this json loop with jquery each method.
i have used both JSON.parse and $.parseJSON ,its still not working…its throwing Uncaught SyntaxError: Unexpected token o
you json is invalid.
use JSON.parse
Thanks guys
this worked for me.
do not used:
datatype:’json”,
use this:
$.each($.parseJSON(json), function(key, val) {
});
Thank you…
your tutorial and example always help me out… 🙂
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
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″}]”;
Thanks man! for saving a lot of my time with this 🙂
(Y) nice
Thanks man
Thanks mkyong you save me day… Nice article
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??
if the conequense isn’t expected ,but just 0,undefined ,1,undefined, …what’s the problem with it
This was helpful
you saved my time thanks
Great article.