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+'">';
...
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.
Source: Stackoverflow.com