在嵌套 JavaScript 数组中循环出现问题答案

【问题标题】：Having Issues Looping Through Nested JavaScript Array在嵌套 JavaScript 数组中循环出现问题
【发布时间】：2017-08-27 06:01:06
【问题描述】：

我在循环嵌套 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); 的控制台输出如下所示，显示了我尝试访问的嵌套数据结构：

【问题讨论】：

标签： javascript jquery json foreach

【解决方案1】：

由于您使用的是 jQuery，您可以对嵌套数组再次使用 each：

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

为了我们可以测试这个，我们必须假装我们有你的 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

【讨论】：

【解决方案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;
        });
    });
});

【讨论】：