在嵌套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);的控制台輸出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>");
        });
    });
});

為了能夠對此進行測試，我們必須假裝我們擁有您的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;
        });
    });
});