How to populate multiple JavaScript arrays of objects to HTMLDOM

Question

I am having difficulty to get all the array of objects and display it into HTML lists. Can anyone help me, please. The below is my HTML and JavaScript code. Looking forward to your help.

const allData = [{
    date: '2nd',
    venue: 'venue1',
    location: 'location1',
  },
  {
    date: '3rd',
    venue: 'venue2',
    location: 'location2',
  },
  {
    date: '4th',
    venue: 'venue3',
    location: 'location3',
  }
]

allData.forEach(data => {
  [...document.querySelectorAll('.targets')].forEach(list => {
    list.innerHTML = `
<h5 >DATE</h5>
<h4 >${data.date}</h4>
<h5 >VENUE</h5>
<h4 >${data.venue}</h4>
<h5 >LOCATION</h5>
<h4 >${data.location}</h4>
<Button >BUY TICKETS</Button>
`;
  })
});

<ul>
  <li class="targets"></li>
</ul>

There is only one `li` in your HTML, so you just overwrite the innerHTML on each iteration. Instead you need to create a new `li` for each element in your array and add it to your `ul` — pilchard, Oct 14 '21 at 13:13
see: [Create a
and fill it based on a passed array](https://stackoverflow.com/questions/11128700/create-a-ul-and-fill-it-based-on-a-passed-array) and [Make a html unordered list from javascript array](https://stackoverflow.com/questions/28677745/make-a-html-unordered-list-from-javascript-array/28677901) — pilchard, Oct 14 '21 at 13:14
@user3718511 ... From all the provided approaches, are there any questions left? — Peter Seliger, Oct 16 '21 at 08:24
@user3718511 ... At SO it is considered to be a nice gesture from the one who got help, to provide some feedback and/or vote on answers and/or accept the answer which was the most helpful in solving the OP's problem. — Peter Seliger, Nov 11 '21 at 08:45

Naren Murali · Accepted Answer · 2021-10-14T13:23:04.543

If you change the order of for loops execution and append each string to the previous it works!

const allData = [{
    date: '2nd',
    venue: 'venue1',
    location: 'location1',

  },

  {
    date: '3rd',
    venue: 'venue2',
    location: 'location2',

  },

  {
    date: '4th',
    venue: 'venue3',
    location: 'location3',

  },
];


const list = document.querySelector('.target')
let innerHTML = '';
allData.forEach(data => {
  innerHTML += `
    <li>
        <h5 class = "shows__date">DATE</h5>
        <h4 class = "shows__calander">${data.date}</h4>
        <h5 class = "shows__venue-title">VENUE</h5>
        <h4 class = "shows__venue">${data.venue}</h4>
        <h5 class = "shows__location-title">LOCATION</h5>
        <h4 class = "shows__location">${data.location}</h4>
        <Button Class = "shows__btn">BUY TICKETS</Button>
        </li>
        `;
});

list.innerHTML = innerHTML;

<ul class="target">
</ul>

score 1 · Answer 2 · edited Oct 14 '21 at 15:01

I think you don't need to loop for class='targets' because you only have one li in your html code. It might be better to just get the ul element and then loop allData variable, then change the ul innerHTML on each loop.

HTML Code

<ul></ul>

JS Code:

const allData= [
{
   date:  '2nd',
   venue: 'venue1',
   location: 'location1',

},

{
    date:  '3rd',
    venue: 'venue2',
    location: 'location2',
    
 },

 {
    date:  '4th',
    venue: 'venue3',
    location: 'location3',
    
 },
]

let ul = document.querySelector('ul')
let listContent = ''
allData.forEach(data=>{
        listContent = listContent +
          `                  
        <li>
            <h5 >DATE</h5>
            <h4 >${data.date}</h4>
            <h5 >VENUE</h5>
            <h4 >${data.venue}</h4>
            <h5 >LOCATION</h5>
            <h4 >${data.location}</h4>
            <Button >BUY TICKETS</Button>
        </li>
        `;
   });

   ul.innerHTML = listContent

Edited based on pilchard comment

as i noted earlier on @narenmurali's answer, updating the innerHTML of an active element on each iteration isn't great. Instead generate all the elements to be added and then make a single change after the loop. — pilchard, Oct 14 '21 at 13:53

Peter Seliger · Answer 3 · 2021-10-14T14:13:09.137

The OP provides a basic list structure by the "naked" <ul/> / <li/> markup.

Thus, there is only a sole <li class="targets"></li> element which can be accessed with a query like '.targets'. Which means, the OP always writes to one and the same element which shows the expected result of a list which features just one element with the data-array's last item-data.

But the <li/> element can be used as a blueprint for creating other list-item elements via <node>.cloneNode which all will be <li class="targets"></li>-alike.

Now one can assign the correct data-item related html content to each newly created list-item clone which also gets appended to its parent list-element ...

const allData = [{
  date: '2nd',
  venue: 'venue1',
  location: 'location1',
}, {
  date: '3rd',
  venue: 'venue2',
  location: 'location2',
}, {
  date: '4th',
  venue: 'venue3',
  location: 'location3',
}];

const venueItemBlueprint = document.querySelector('li.targets');
const venueList = venueItemBlueprint && venueItemBlueprint.parentElement;

if (venueList) {
  venueList.innerHTML = '';

  allData.forEach(venueData => {
    const venueItem = venueItemBlueprint.cloneNode();

    venueItem.innerHTML = `
      <h5>DATE</h5>
      <h4>${ venueData.date }</h4>
      <h5>VENUE</h5>
      <h4>${ venueData.venue }</h4>
      <h5>LOCATION</h5>
      <h4>${ venueData.location }</h4>
      <Button>BUY TICKETS</Button>`;

    venueList.appendChild(venueItem);
  });
}

<ul>
  <li class="targets"></li>
</ul>

How to populate multiple JavaScript arrays of objects to HTMLDOM

3 Answers3