在嵌套JavaScript数组中循环问题

Question

我遇到了循环嵌套JavaScript数组的问题，需要一些帮助。我正在尝试返回一组包含属性名称和值的列表项，但它以未定义的形式返回。任何帮助将不胜感激，因为这是一个重要的项目。

的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>" 
     } 

     }); 
    }); 

从console.dir(item.ItemDescription[0].features);输出控制台可以在下面看到并显示嵌套数据结构我试图访问：

Answer 1

由于您使用jQuery ，您可以再次使用每个嵌套数组：

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

这样我们就可以测试这一点，我们必须pretent我们有你的JSON：

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>"); 
    }); 
}); 

工作测试上CodePen：https://codepen.io/skunkbad/pen/OjoBNb

Answer 2

Array.forEach功能不累积数组元素。你可以使用Array.reduce功能追加所有列表项，并Array.map环绕每个项目的<li>标签：

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