如何將多個JavaScript物件陣列填充到HTMLDOM

我很難獲取所有物件陣列并將其顯示到 HTML 串列中。任何人都可以幫助我，請。下面是我的 HTML 和 JavaScript 代碼。期待您的幫助。

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>

uj5u.com熱心網友回復：

如果您更改 for 回圈執行的順序并將每個字串附加到前一個字串，它就可以作業！

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>

uj5u.com熱心網友回復：

我認為您不需要回圈，class='targets'因為您的代碼中只有一個lihtml。最好只獲取ul元素，然后回圈allData變數，然后在每個回圈中更改ul innerHTML。

HTML代碼

<ul></ul>

JS代碼：

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

根據pilchard評論編輯

uj5u.com熱心網友回復：

OP 通過“裸” <ul/> /<li/> 標記提供了一個基本的串列結構。

因此，只有一個<li ></li>元素可以通過像'.targets'. 這意味著，OP 總是寫入一個相同的元素，該元素顯示串列的預期結果，該串列僅包含一個元素和資料陣列的最后一項資料。

但是該<li/>元素可以用作創建其他串列項元素的藍圖<node>.cloneNode，所有這些元素都將<li ></li>相似。

現在可以將正確的資料項相關的 html 內容分配給每個新創建的串列項克隆，這些克隆也附加到其父串列元素...

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>

標籤：javascript html dom 数据结构 附加

上一篇：創建具有特定css的div時如何執行函式？

下一篇：為什么變數'a'無法訪問document.querySelector('#b1').value的新值