web-dev-qa-db-fra.com

JQuery $ .each () Itération d'objet tableau JSON

J'ai de la difficulté à essayer de résoudre une itération JQuery $ .each ()

Ceci est mon tableau, limitant les résultats pour plus de commodité

[{"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"}]
}]

Ma première itération $ .each fonctionne très bien, mais la sous-itération pour "EVENTS" est l'endroit où j'ai des problèmes

Ma première fonction $ .each ()

     $.each(json, function(key) {

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

     ....

Ma deuxième fonction $ .each () non fonctionnelle

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


     ...

Je comprends (vaguement) que ce n'est pas un objet JSON singulier, mais un tableau d'objets JSON, mais je ne comprends pas si la première version fonctionne pourquoi la seconde ne fonctionne pas

le résultat final que je veux atteindre une fois que je comprends que c'est un $ .each () dans un $ .each (), je sais que le code ci-dessous ne fonctionne pas, et plus que probablement idiot, mais donne une idée de ce que j'essaie de atteindre: itérer par parent puis enfant par 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+'">';
 ...
jqueryjsoneach
18
Jay Rizzi

Attribuer la deuxième variable pour la fonction $.each function(), la rend beaucoup plus facile car elle vous fournira les données (vous n'aurez donc pas à travailler avec les indices).

$.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>');
     });
});

Devrait imprimer tout ce que vous essayez dans votre question.

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

edit a renommé les variables pour faciliter un peu la compréhension de ce qui est quoi.

39
Niklas