如何使用jQuery从对象的嵌套数组创建嵌套的HTML

Question

我需要将JSON响应转换为嵌套的div元素，并使用jquery附加它们。 例如，我的JSON响应就是这样。

[
    {
        name: "List one",
        arr: [
            {key: "A1"},
            {key: "B1"},
            {key: "C1"},
            {key: "D1"}
        ]
    },
    {
        name: "List two",
        arr: [
            {key: "A2"},
            {key: "B2"},
            {key: "C2"},
            {key: "D2"}
        ]
    },
    {...},
    {...}
]

我需要建立一个像这样的div结构

<ul>
    <li>List one</li>
    <ul>
        <li>A1</li>
        <li>B1</li>
        <li>C1</li>
        <li>D1</li>
    </ul>
    <li>List two</li>
    <ul>
        <li>A2</li>
        <li>B2</li>
        <li>C2</li>
        <li>D2</li>
    </ul>
    .......
</ul>

目前，这就是我尝试过的方式

jsonObject.forEach((item)=>{
    var subCategories = item.arr.forEach((subCat)=>{
                            return `<li class="list-group-item">${subCat.key}</li>`
                        })

    $('#nested').append(
        `<li class="list-group-item">
            ${item.name}
            <ul>
                ${subCategories}
            </ul>


        </li>`
    );
});

这有点类似于React方法。 但是我对subCategories不确定。 如何使用jquery实现类似的功能？

Answer 1

我理解了我的错误，因为forEach方法不返回任何内容，所以map是使用正确的方法来返回数组的方法。 然后加入数组，否则，HTML中将包含逗号。

jsonObject.forEach((item)=>{
    var subCategories = item.arr.map((subCat)=>{
                            return `<li class="list-group-item">${subCat.key}</li>`
                        }).join('')

    $('#nested').append(
        `<li class="list-group-item">
            ${item.name}
            <ul>
                ${subCategories}
            </ul>
        </li>`
    );
});

Answer 2

实现此目的的一种方法是将html构造为字符串，然后使用html更新div

 $(function() { var jsonObject = [{name: "List one",arr: [{key: "A1"},{key: "B1"},{key: "C1"},{key: "D1"}]},{name: "List two",arr: [{key: "A2"},{key: "B2"},{key: "C2"},{key: "D2"}]}]; var html = "<ul>"; jsonObject.forEach((i) => { html += "<li>" + i.name + "</li>"; html += "<li>"; html += "<ul>"; i.arr.forEach((s) => { html += "<li>" + s.key + "</li>"; }); html += "</ul>"; html += "</li>"; }); html += "</ul>"; $("#nested").html(html); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="nested"></div>