如何使用 JavaScript 在 HTML 中显示数组元素答案

【问题标题】：How to show array elements in HTML using JavaScript如何使用 JavaScript 在 HTML 中显示数组元素
【发布时间】：2021-11-12 23:43:28
【问题描述】：

我有以下 HTML 代码。我已经注释了我想再次重复以显示数组元素的代码部分。我的数组包含这样的名称：-var name=['amit','mayank','jatin'];。所以我想显示 10 个这样的块，因为我的数组包含 10 个从后端获取的这样的名称。

<div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
                    <div class="table">

                        <div class="row header">
                            <div class="cell">
                                Rank
                            </div>
                            <div class="cell">
                                Name
                            </div>
                            <div class="cell">
                                Quiz Name
                            </div>
                            <div class="cell">
                                Scores
                            </div>
                        </div>
//repeat below code
                        <div class="row">
                            <div class="cell" data-title="Full Name">
                                1
                            </div>
                            <div class="cell" data-title="Age">
                                Amit Singh
                            </div>
                            <div class="cell" data-title="Job Title">
                                Python Quiz
                            </div>
                            <div class="cell" data-title="Location">
                                100
                            </div>
                        </div>
//till here
                    </div>
            </div>
        </div>
    </div>

【问题讨论】：

这能回答你的问题吗？ Generate a table from array of objects

标签： javascript html css arrays

【解决方案1】：

有很多方法，这是其中之一。

在本例中，我们有一个 querySelector，它获取类名为 data 的元素，因此可以在此位置插入 HTML 代码。

map()方法用于为数组中的每个元素依次调用一次提供的函数，这样就可以创建包含数组所有数据的表。

希望对你有用。

const dataElement = document.querySelector('.data');

const data = [
  {fullName: 'Nathan', age: 21, jobTitle: 'Programmer', location: 'IRAN'},
  {fullName: 'Ali', age: 21, jobTitle: 'Programmer', location: 'UK'},
  {fullName: 'Ariana', age: 21, jobTitle: 'Programmer', location: 'US'},
];

data.map(item => {
  dataElement.insertAdjacentHTML('afterbegin', `
      <div class="cell" data-title="Full Name">
          ${item.fullName}
      </div>
      <div class="cell" data-title="Age">
          ${item.age}
      </div>
      <div class="cell" data-title="Job Title">
          ${item.jobTitle}
      </div>
      <div class="cell" data-title="Location">
          ${item.location}
      </div>
`)
})

<div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
                    <div class="table">

                        <div class="row header">
                            <div class="cell">
                                Rank
                            </div>
                            <div class="cell">
                                Name
                            </div>
                            <div class="cell">
                                Quiz Name
                            </div>
                            <div class="cell">
                                Scores
                            </div>
                        </div>
//repeat below code
                        <div class="row data">
                        </div>
//till here
                    </div>
            </div>
        </div>
    </div>

【讨论】：

非常感谢它的工作，但需要一些更改，例如将 afterbegin 替换为 beforeend 和在查询选择器中将 .data 更改为 .table。因为元素之间没有填充。
你应该在这里使用forEach()，因为你没有对从map()返回的数组做任何事情，请参阅：JavaScript: Difference between .forEach() and .map()

【解决方案2】：

将该元素转换为字符串，遍历给定数组，使用insertAdjacentHTML 插入。

const names = ['amit', 'mayank', 'jatin'];

const tableBody = names
  .map((name) => `
    <div class="row">
      <div class="cell" data-title="Full Name">1</div>
      <div class="cell" data-title="Age">${name}</div>
      <div class="cell" data-title="Job Title">Python Quiz</div>
      <div class="cell" data-title="Location">100</div>
    </div>`).join('');

const rowHeader = document.querySelector('.table > .header');

rowHeader.insertAdjacentHTML('afterend', tableBody);

【讨论】：

【解决方案3】：

您可以创建一个对象数组，遍历它以创建一个带有 HTML 的字符串，然后将其附加到 HTML 中，然后附加它。

const tableEl = document.querySelector('.table');
let htmlToAppend = "";
let data = [
    {
        name: 'John Doe',
        age: 20,
        job: 'Cashier',
        location: 'London'
    },
    {
        name: 'Jane Doe',
        age: 30,
        job: 'Taxi driver',
        location: 'New York'
    },
    {
        name: 'Bill Gates',
        age: 65,
        job: 'Entertainer',
        location: 'Moldovia'
    },
    {
        name: 'Donald Darko',
        age: 19,
        job: 'Student',
        location: 'Middlesex'
    },
    ];

data.forEach(entry => {
       htmlToAppend += `<div class="row">
                            <div class="cell" data-title="Full Name">
                                ${entry.name}
                            </div>
                            <div class="cell" data-title="Age">
                                ${entry.age}
                            </div>
                            <div class="cell" data-title="Job Title">
                                ${entry.job}
                            </div>
                            <div class="cell" data-title="Location">
                                ${entry.location}
                            </div>
                        </div>`
})

tableEl.innerHTML = htmlToAppend;

【讨论】：