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).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.