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

【问题标题】：How to populate multiple JavaScript arrays of objects to HTMLDOM如何将多个 JavaScript 对象数组填充到 HTMLDOM
【发布时间】：2021-12-02 20:48:50
【问题描述】：

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

【问题讨论】：

您的 HTML 中只有一个 li，因此您只需在每次迭代时覆盖 innerHTML。相反，您需要为数组中的每个元素创建一个新的 li 并将其添加到您的 ul
你能告诉我如何解决这个问题吗？
参见：Create a <ul> and fill it based on a passed array 和 Make a html unordered list from javascript array
@user3718511 ... 从所有提供的方法中，还有什么问题吗？
@user3718511 ... 在 SO 这被认为是得到帮助的人的一个很好的姿态，提供一些反馈和/或对答案进行投票和/或接受最重要的答案有助于解决 OP 的问题。

标签： javascript html dom data-structures append

【解决方案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>

【讨论】：

【解决方案2】：

我认为您不需要为class='targets' 循环，因为您的html 代码中只有一个li。最好只获取 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评论编辑

【讨论】：

正如我之前在@narenmurali 的回答中指出的那样，在每次迭代中更新活动元素的 innerHTML 并不是很好。而是生成所有要添加的元素，然后在循环之后进行单个更改。

【解决方案3】：

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

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

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

现在可以将正确的与数据项相关的 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>

【讨论】：