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>`
);

Answer 3

模板文字的格式应为${i.id}等。您希望使用已处理项而不是users数组的值来呈现模板。 users没有属性id或email，因此undefined

const users = [
  {
    "id":1,
    "name":"Jon",
    "email":"John@gmail.com"
  },
  {
    "id":2,
    "name":"Sam",
    "email":"Sam@gmail.com"
  },
  {
    "id":3,
    "name":"Dan",
    "email":"Dan@gmail.com"
  }
];

const output = users.map(({ id, name, email }) => {
    return `<ul>
        <li>ID: ${id} </li>
        <li>Name: ${name}</li>
        <li>Email: ${email}</li>
    </ul>`
});

console.log(output);

Answer 4

在您的lambda中，您使用i来引用每个用户，因此，您需要使用i.id，i.name等：

let users = [
  { "id":1, "name":"Jon", "email":"John@gmail.com" },
  { "id":2, "name":"Sam", "email":"Sam@gmail.com" },
  { "id":3, "name":"Dan", "email":"Dan@gmail.com" }
];

let output = users.map((i) => {
  return `<ul>
            <li>ID: ${i.id}</li>
            <li>Name: ${i.name}</li>
            <li>Email: ${i.email}</li>
          </ul>`;
});

console.log(output);

Answer 5

您应该使用'i'变量来访问对象属性：

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

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

5 个答案: