Probleme beim Durchlaufen verschachtelter JavaScript-Arrays

Question

Ich habe Probleme beim Durchlaufen eines verschachtelten JavaScript-Arrays und benötige Hilfe. Ich versuche, einen Satz von Listenelementen mit dem Eigenschaftsnamen und dem Wert zurückzugeben, aber es wird als undefiniert zurückgegeben. Jede Hilfe würde sehr geschätzt werden, da dies ein wichtiges Projekt ist.

JavaScript

$.getJSON("item-data.json", function(results) { 
     $.each(results.CatalogEntryView, function(index, item) { 
      console.dir(item.ItemDescription[0].features); 

      document.getElementById("productHighlightsList").innerHTML = item.ItemDescription[0].features.forEach(enumerateProperties) 

function enumerateProperties(key, val) 
     { 
      return "<li>" + key + val + "</li>" 
     } 

     }); 
    }); 

Die Konsolenausgabe von console.dir(item.ItemDescription[0].features); unten zu sehen und zeigt die verschachtelten Datenstruktur Ich versuche, Zugang:

Answer 1

Da Sie jQuery verwenden , können Sie jedes für dieses verschachtelte Array einfach wieder verwenden:

$.getJSON("item-data.json", function(results) { 
    $.each(results.CatalogEntryView, function(index, item) { 
     $.each(item.ItemDescription[0].features, function(k,v){ 
      $("#productHighlightsList").append("<li>" + k + v + "</li>"); 
     }); 
    }); 
}); 

Damit wir diese testen können, müssen wir Vorzelt wir Ihre json haben:

var results = { 
    'CatalogEntryView': [ 
     { 
      'ItemDescription': [ 
       { 
        'features': { 
         '0': '<strong>A</strong>', 
         '1': '<strong>B</strong>', 
         '2': '<strong>C</strong>', 
         '3': '<strong>D</strong>', 
         '4': '<strong>E</strong>', 
         '5': '<strong>F</strong>', 
         '6': '<strong>G</strong>' 
        } 
       } 
      ] 
     } 
    ] 
}; 

$.each(results.CatalogEntryView, function(index, item) { 
    $.each(item.ItemDescription[0].features, function(k,v){ 
     $("#productHighlightsList").append("<li>" + k + v + "</li>"); 
    }); 
}); 

Arbeits Test auf CodePen: https://codepen.io/skunkbad/pen/OjoBNb

Answer 2

Array.forEach Funktion die Array-Elemente nicht akkumulieren. Sie könnten Array.reduce Funktion verwenden, um alle Listenelemente anhängen, und Array.map<li> Tags um jedes der Elemente zu wickeln:

$.getJSON("item-data.json", function(results) { 
    $.each(results.CatalogEntryView, function(index, item) { 
     console.dir(item.ItemDescription[0].features); 

     document.getElementById("productHighlightsList").innerHTML = item.ItemDescription[0].features.map(function(item){ 
      return "<li>" + item + "</li>"; 
     }).reduce(function(accumulator , item) { 
      return accumulator + item; 
     }); 
    }); 
});