如何将多个 JavaScript 对象数组填充到 HTMLDOM

Question

我很难获取所有对象数组并将其显示到 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>

Answer 1

如果您更改 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>

Answer 2

我认为您不需要为 class='targets' 循环，因为您的 html 代码中只有一个 li。最好只获取 ul 元素然后循环 allData 变量，然后更改 ul innerHTML on每个循环。

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 评论编辑

Answer 3

OP 通过 "naked" <ul/> / <li/> 提供了一个基本的列表结构标记。

因此，只有一个 <li class="targets"></li> 元素可以通过 '.targets' 等查询访问。这意味着，OP 总是写入同一个元素，该元素显示列表的预期结果，该列表仅包含一个元素和数据数组的最后一项数据。

但是 <li/> 元素可以用作通过 <node>.cloneNode 创建其他列表项元素的蓝图，所有元素都将 <li class="targets"></li> 相似。

现在可以将正确的数据项相关 html 内容分配给每个新创建的列表项克隆，该副本也 appended 到其父列表元素...

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 对象数组填充到 HTMLDOM

How to populate multiple JavaScript arrays of objects to HTMLDOM

html

javascript

dom

append

data-structures