Menu
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+'">';
...
869
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.
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.
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.
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.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
