How to create nested HTML from nested array of objects using jquery

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?

oh!!! I got it working using map and then join the array. Thanks gurvinder — anoop chandran
– anoop chandran, Commented Mar 12, 2018 at 12:20

anoop chandran · Accepted Answer · 2018-03-12 12:25:07Z

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

answered Mar 12, 2018 at 12:25

anoop chandran

1,5105 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eddie · Accepted Answer · 2018-03-12 12:07:55Z

0

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>

answered Mar 12, 2018 at 12:07

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

4 Comments

sarath s rajendran Over a year ago

As per the requirement the secondary ul is not inside li.

Eddie Over a year ago

@SarathSRajendran As per the standard, The children (direct descendants) of a ul element must all be li elements.

Eddie Over a year ago

Please read: stackoverflow.com/questions/12129037/…

Eddie Over a year ago

@SarathSRajendran if you know that, im not sure what is the point of the comment. Are you trying to suggest that i should answer invalid HTML code?

Collectives™ on Stack Overflow

How to create nested HTML from nested array of objects using jquery

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related