Nested-loop Inside Append

Question

I need to make two loops from one data point to create multiple divs.

Data Example:

let data = [
  [
    {
        title: '1'
    },
    {
        title: '2'
    }
  ],
  [
    {
        title: '3'
    },
    {
        title: '4'
    }
  ]
];

If I loop in here, I get 2 arrays with 2 sets of obj each.

I need to append a parent div for each array and inside the appended div, loop again to append the information from the obj.

To look something like this:

<div class="first-array"> //Class is just for reference
  <span>
    <p>title</p>
  </span>
  <span>
    <p>title</p>
  </span>
</div>
<div class="second-array"> //Class is just for reference
  <span>
    <p>title</p>
  </span>
  <span>
    <p>title</p>
  </span>
</div>

How can I be able to achieve this?

title or 1, 2, etc? Also,  should not be within  — Phil
– Phil, Commented Sep 7, 2021 at 23:46
Use nested loops. The outer loop processes the outer array and creates the div elements. The inner loop processes the inner arrays and creats the span and title elements. — Barmar
– Barmar, Commented Sep 7, 2021 at 23:47

Spectric · Accepted Answer · 2021-09-07 23:52:11Z

2

You can use Array.map to wrap each nested item's title property in the appropriate tags, then use Array.join to convert the array to a string:

let data=[[{title:"1"},{title:"2"}],[{title:"3"},{title:"4"}]];

const HTML = data.map(e => '<div>'+e.map(f => `<span><p>${f.title}</p></span>`).join('')+'</div>').join('')

console.log(HTML);

document.write(HTML);

answered Sep 7, 2021 at 23:52

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

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

Comments

Phil · Accepted Answer · 2021-09-10 00:02:32Z

2

jQuery's .append() can take an array of objects so you can map your original data to the structure you want

let data = [[{"title":"1"},{"title":"2"}],[{"title":"3"},{"title":"4"}]]

$(document.body).append(data.map(titles =>
  $("<div>").append(titles.map(({ title: text }) =>
    $("<span>").append($("<p>", { text }))))))

div, span, p {
  display: block;
  border: 1px solid;
  padding: .5rem;
  margin: .5rem;
  position: relative;
}
div:after, span:after, p:after {
  position: absolute;
  font-size: 0.6em;
  color: gray;
  top: 0;
  left: 0;
}
div:after { content: "div"; }
span:after { content: "span"; }
p:after { content: "p"; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Sep 10, 2021 at 0:02

answered Sep 7, 2021 at 23:53

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

Nested-loop Inside Append

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related