How to populate multiple JavaScript arrays of objects to HTMLDOM-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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

Thus, there is only a sole <li ></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 ></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>