JS如何在模板文字中映射数组

Question

我遇到了一个问题，今天无法解决。比如有一个json文件text.json

[
  {
    "id":1,
    "name":"Jon",
    "email":"John@gmail.com"
  },
  {
    "id":2,
    "name":"Sam",
    "email":"Sam@gmail.com"
  },
  {
    "id":3,
    "name":"Dan",
    "email":"Dan@gmail.com"
  }
]

现在我想使用 ajax 来获取这个 json 文件，这里的部分不起作用。

let output = users.map((i) => {
                    return `<ul>
                        <li>ID: ${users.id} </li>
                        <li>Name: ${users.name}</li>
                        <li>Email: ${users.email}</li>
                    </ul>`
                })

我应该把 i 放在模板文字中的什么位置？

Answer 1

会不会是：

let output = users.map((i) => {
    return `<ul>
              <li>ID: ${i.id} </li>
              <li>Name: ${i.name}</li>
              <li>Email: ${i.email}</li>
            </ul>`;
 });

Answer 2

您试图访问父数组上的值，而不是访问数组中的每个单独元素。

试试这个：

users.map(user => 
  `<ul>
    <li>ID: ${user.id} </li>
    <li>Name: ${user.name}</li>
    <li>Email: ${user.email}</li>
  </ul>`
);