Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery $.each() JSON array object iteration

Tags:

json

jquery

each

I am having some real difficulty attempting to solve a JQuery $.each() iteration

This is my array, limiting results for convenience

[{"GROUP_ID":"143",
  "GROUP_TYPE":"2011 Season",
  "EVENTS":[
    {"EVENT_ID":"374","SHORT_DESC":"Wake Forest"},
    {"EVENT_ID":"376","SHORT_DESC":"Yale"},
    {"EVENT_ID":"377","SHORT_DESC":"Michigan State"}]
 },
 {"GROUP_ID":"142",
  "GROUP_TYPE":"2010 Season",
  "EVENTS":[
    {"EVENT_ID":"370","SHORT_DESC":"Duke"},
    {"EVENT_ID":"371","SHORT_DESC":"Northwestern"},
    {"EVENT_ID":"372","SHORT_DESC":"Brown"}]
}]

My first $.each iteration works very well, but the sub iteration for "EVENTS" is where I am having issues

My first $.each() function

     $.each(json, function(key) {

            html = '<a href="'+json[key].GROUP_ID+'">';

     ....

My non-working second $.each() function

     $.each(json.EVENTS, function(key) {
    newHTML += '<p>'+json.EVENTS[key].SHORT_DESC+'</p>';


     ...

I am understanding (loosely) that this is not a singular JSON object, but a JSON array of objects, but not understanding if the first version works why the second does not

the end result I want to achieve once I understand this is an $.each() within an $.each(), I know the code below does not work, and more than likely idiotic, but gives an idea of what im trying to achieve : iterate through parent then child by parent

$.each(json, function(key) {

            html = '<a href="'+json[key].GROUP_ID+'">';

     $.each(json[key].EVENTS, function(subkey) {

            html = '<a href="'+json[key]EVENTS[subkey].SHORT_DESC+'">';
 ...
like image 869
Jay Rizzi Avatar asked Jun 09 '11 20:06

Jay Rizzi


People also ask

How do I iterate an array of objects in jQuery?

each(), which is used to iterate, exclusively, over a jQuery object. The $. each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.

How do I iterate through a JSON object?

Use Object.values() or Object. entries(). These will return an array which we can then iterate over. Note that the const [key, value] = entry; syntax is an example of array destructuring that was introduced to the language in ES2015.

What is JSONArray and JSONObject?

JSONObject and JSONArray are the two common classes usually available in most of the JSON processing libraries. A JSONObject stores unordered key-value pairs, much like a Java Map implementation. A JSONArray, on the other hand, is an ordered sequence of values much like a List or a Vector in Java.


1 Answers

Assign the second variable for the $.each function() as well, makes it lot easier as it'll provide you the data (so you won't have to work with the indicies).

$.each(json, function(arrayID,group) {
            console.log('<a href="'+group.GROUP_ID+'">');
    $.each(group.EVENTS, function(eventID,eventData) {
            console.log('<p>'+eventData.SHORT_DESC+'</p>');
     });
});

Should print out everything you were trying in your question.

http://jsfiddle.net/niklasvh/hZsQS/

edit renamed the variables to make it bit easier to understand what is what.

like image 86
Niklas Avatar answered Sep 21 '22 18:09

Niklas