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

Question

I need to convert a JSON response to nested div elements and append them using jquery. For example, my JSON response is something like this.

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

and I need to build a div structure like this

<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>

Currently this is how I tried,

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

This is somewhat similar to React method. But I am getting undefined for subCategories. How do I achieve something like this using jquery?

Answer 1

I understood my mistake, Since forEach method doesn't return anything, map is the right one to use, to return an array. Then join the array, otherwise, there will be commas in your 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

One way to achieve this is to construct your html as a string and use html to update the 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>