Javascript : How to loop over and parse JSON data?

This note is a short tutorial on how to loop over and parse JSON data with JQuery's each() function and also show example on how to use JQuery's each() function callback.

jQuery.each( array, callback )

In this example below, the callback function will treat the id as index and alphabet as object.

Here we go :

 var jsonArray = [{
 "id": "1",
 "alphabet": "a"
 }, {
 "id": "2",
 "alphabet": "b"
 }, {
 "id": "3",
 "alphabet": "c"
 }, {
 "id": "4",
 "alphabet": "d"
 }, {
 "id": "5",
 "alphabet": "e"
 }];

 $.each(jsonArray, function(index, object) {
 alert(object.alphabet);
 });

Play at : http://codepen.io/anon/pen/JdeyZr

Sometimes, JQuery will complain(in console log) that the JSON array is not properly formatted. This is usually caused by malformed JSON string. To fix this issue, use the JQuery's parseJSON() function to parse the JSON array.

 $.each($.parseJSON(jsonArray), function(index, object) {
  alert(object.alphabet);
 });

References :

http://api.jquery.com/jQuery.parseJSON/

http://api.jquery.com/jQuery.each/