循环遍历 JSON 中的嵌套数组值，将这些值附加到生成的 html 中

Looping through nested array vaues in JSON, appending those values to generated html

本文关键字：html JSON 遍历嵌套数组循环更新时间：2023-09-26

已编辑：

我（仍然）在从 JSON 中的嵌套数组中获取值并将它们附加到生成的 html 时遇到了一些麻烦。

我目前正在使用以下 JSON（已更新）：

{
    "OuterArray": [
        {
            "memberId": "01",
            "key01": "",
            "included": "true",
            "nestedArray": [
                { "keyA": "", "keyB": "" },
                { "keyA": "", "keyB": "" }
            ]
        },
        {
            "memberId": "02",
            "key01": "",
            "included": "true",
            "nestedArray": [
                { "keyA": "", "keyB": "" },
                { "keyA": "", "keyB": "" }
            ]
        },
        {
            "memberId": "03",
            "key01": "",
            "included": "false",
            "nestedArray": [
                { "keyA": "", "keyB": "" },
                { "keyA": "", "keyB": "" }
            ]
        },
        {
            "memberId": "04",
            "key01": "",
            "included": "true",
            "nestedArray": [
                { "keyA": "", "keyB": "" },
                { "keyA": "", "keyB": "" }
            ]
        }
    ]
}

而这个js：

for (var i = 0; i < outerArray.length; i++) {
    if (outerArray[i].included !== "false") {
    var key01 = outerArray[i].key01;
    var key02 = outerArray[i].key02;
    // etc.
    var nestedArray = outerArray[i]["nestedArray"];
    myDiv.innerHTML +=
        "<div class='"outer-array-stuff'">"
            + "<p class='"key01'">" + key01 + "</p>"
            + "<p class='"key02'">" + key02 + "</p>"
            + "<div class='"nested-array-stuff'">" // help?
            + "</div>"
        + "</div>"
    var nestedArrayStuff = document.getElementsByClassName("nested-array-stuff")[i];
    for (var j=0; j<outerArray.length; j++) {
        nestedArrayStuff.innerHTML += "<p class='"keyA'">" + nestedArray[j].keyA + "</p>";
    }
}

请注意，外部数组

中的一个键具有一个布尔值，该值确定它（外部数组成员）是否包含在页面中，并且其嵌套数组内容是否包含在页面中。

所以重申一下，目标是：

<div class="outer-array-stuff">
    <!-- <snip: some outer array key/values here /> -->
    <div class="nested-array-stuff">
    <div class="nested-array-stuff">
        <p>[e.g., nested array key 1 value]</p>
        <p>[e.g., nested array key 2 value]</p>
        <p>[etc.]</p>
    </div>
</div>

如果所有"包含"的外部数组成员都是"true"，则所有外部和嵌套都会加载，但这并不完全是我想要的;我需要过滤，以便只有那些"包含"！=="假"。所以现在我的问题是，尽管在 if 'include'/else 循环内，但外部数组成员在第一个排除的外部数组成员处停止加载（实际上，下一个"真正的"外部数组成员确实加载，但其嵌套数组内容没有，然后没有进一步加载，整个外部数组循环死亡。

关于为什么会发生这种情况的任何见解？

非常感谢德雷斯猫对这一点的帮助。

附言：一般来说，我试图尽量减少对jQuery的依赖。

非常感谢，svs

你快到了。这是您的代码经过一些注释的修订。

// Generally is not a good practice iterate arrays using for..in
//for (var i in outerArray) {
for (var i = 0; i < outerArray.length; i++) {
    var key01 = outerArray[i].key01;
    var key02 = outerArray[i].key02;
    // This should by outerArray array and not jsonData object.
    var nestedArray = outerArray[i]["nestedArray"];
    myDiv.innerHTML +=
        "<div class='"outer-array-stuff'">"
            + "<p class='"key01'">" + key01 + "</p>"
            + "<p class='"key02'">" + key02 + "</p>"
            + "<div class='"nested-array-stuff'">" // help?
            + "</div>"
        + "</div>"
    // getElementsByClassName gets a list of elements that have that class.
    // I suppose you want to add the elements to the corresponding outer array.
    // Let's use the loop index i to get the proper parent element. You could also
    // just get the last one.
    var nestedArrayStuff = document.getElementsByClassName("nested-array-stuff")[i]; // help?
    // Again I recommend you not to use for..in for arrays.
    for (var obj in nestedArray) {
        nestedArrayStuff.innerHTML += "<p class='"keyA'">" + nestedArray[obj].keyA + "</p>"; // NOPE
    }
}

请参阅演示。

您还可以在将嵌套数组添加到div 元素之前构建整个嵌套数组的内容。然后，您无需查询文档即可获取嵌套数组 stuff 元素。

for (var i in outerArray) {
    var key01 = outerArray[i].key01;
    var key02 = outerArray[i].key02;
    var nestedArray = outerArray[i]["nestedArray"];
    var nestedArrayStuff = '<div class='"nested-array-stuff'">';    
    for (var obj in nestedArray) {
        nestedArrayStuff += "<p class='"keyA'">" + nestedArray[obj].keyA + "</p>"; // NOPE
    } 
    nestedArrayStuff += '</div>';
    myDiv.innerHTML += "<div class='"outer-array-stuff'">"
            + "<p class='"key01'">" + key01 + "</p>"
            + "<p class='"key02'">" + key02 + "</p>"
            + nestedArrayStuff
            + "</div>"
        + "</div>";
}

查看演示

nestedArray不是

字符串。您的nestedArray数组循环应如下所示。

var nestedArray = outerArray[i].nestedArray;   
for (var j in nestedArray) {
 console.log(nestedArray[j].keyA);
 console.log(nestedArray[j].keyB);
}

这是您的完整解决方案，我使用列表来输出内容。它假设我们有一个容器：

<div id="mydiv"></div>

比JS将是：

var myDiv = document.getElementById('mydiv');
var outerArray = [
    {
        "memberId":"01",
        "key01":"",
        "key02":"key02 exists, ...",
        "included":"true",
        "nestedArray":[
            {
                "keyA":"1",
                "keyB":"2"
            },
            {
                "keyA":"3",
                "keyB":"4"
            }
        ]
    },
    {
        "memberId":"02",
        "key01":"key01 value..",
        "included":"true",
        "nestedArray":[
            {
                "keyA":"5",
                "keyB":""
            },
            {
                "keyA":"",
                "keyB":"8"
            }
        ]
    },
    {
        "memberId":"03",
        "key02":"",
        "included":"false",
        "nestedArray":[
            {
                "keyA":"",
                "keyB":"9"
            },
            {
                "keyA":"",
                "keyB":""
            }
        ]
    },
    {
        "memberId":"04",
        "key01":"value of key01",
        "key02":"key02 value ...",
        "included":"true",
        "nestedArray":[
            {
                "keyA":"",
                "keyB":"10"
            },
            {
                "keyA":"11",
                "keyB":"12"
            }
        ]
    }
];

var insertHtml = '';
for (var i = 0; i < outerArray.length; i++) {
    if (outerArray[i].included !== "false") {
        insertHtml += "<ul class='"outer-array-stuff'">";
        insertHtml += "    <li>";
        insertHtml += "     <p class='"memberId'">memberId(" + i + "): " + outerArray[i].memberId + "</p>"
        insertHtml += "     <p class='"key01'">key01: " + ( ( typeof outerArray[i].key01!='undefined' && outerArray[i].key01 ) ? outerArray[i].key01 : '') + "</p>"
        insertHtml += "     <p class='"key02'">key02: " + ( ( typeof outerArray[i].key02!='undefined' && outerArray[i].key02 ) ? outerArray[i].key02 : '') + "</p>"
        var nestedArray = outerArray[i]["nestedArray"];
        if ( nestedArray.length>0 ) {
            insertHtml += "     <ul class='"nested-array-stuff'">"
            for (var j=0; j<nestedArray.length; j++) {
                insertHtml += "<li class='"keyA'">keyA(" + j + "): " + nestedArray[j].keyA + "</li>";
                insertHtml += "<li class='"keyB'">keyB(" + j + "): " + nestedArray[j].keyB + "</li>";
            };
            insertHtml += "     </ul>"
        };
        insertHtml += "    </li>";
        insertHtml += "</ul>"
    }
}
myDiv.innerHTML = insertHtml;