javascript - 使用什么方法访问数组中的多个对象？

Question

我是 javascript 的新手，并且还在学习它们。

所以我正在构建一个项目，我想在其中向 DOM 显示多个对象，我将它放在一个数组中。我不确定使用什么方法来访问数组中的对象。

<div class="container">
    <div class="hero">
        <h2>List of Names</h2>
    </div>

    <ul class="name-list"></ul>
</div>

这是我的js文件:

const nameList = document.querySelector('.name-list');

//List of Names
const john = {
    name: 'john',
    car: 'fiat',
    address: 'new york'
}
const mike = {
    name: 'mike',
    car: 'toyota',
    address: 'sydney'
}
const greg = {
    name: 'greg',
    car: 'nissan',
    address: 'melbourne'
}

//Store list of names in an array
const allNames = [
    john,
    mike,
    greg
]

function displayName (){

    //Not sure what methods to use to     
    return `
        <li>
            <p>Name: ${allNames.name}</p>
            <p>Car: ${allNames.car}</p>
            <p>Address: ${allNames.address}</p>
        </li>
    `
}

所以我有点想显示 DOM 中的所有对象。是否需要先将对象放入数组中？我使用什么方法返回文件中的列表？或者您是否知道任何更简单的方法来显示 DOM 中的所有对象？

非常感谢您的帮助。

Answer 1

也许你可以尝试这样的事情:

function showNameList() {
  const allNames = [
      {
          name: 'john',
          car: 'fiat',
          address: 'new york'
      },
      {
          name: 'mike',
          car: 'toyota',
          address: 'sydney'
      },
      {
          name: 'greg',
          car: 'nissan',
          address: 'melbourne'
      }
  ]
  var namelist = allNames.map(function (t, i) {
    return `<b>Name : </b> ${t.name}<br/><b>Car : </b> ${t.car}<br/><b>Address : </b> ${t.address}<br/><br/>`;
  })

  document.getElementById('name-list').innerHTML =
    '<li>' + namelist.join('</li><li>') + '</li>'
}

showNameList()

<div class="container">
    <div class="hero">
        <h2>List of Names</h2>
    </div>

    <ul id="name-list"></ul>
</div>