![](/img/trans.png)
[英]How to iterate through array of objects in template literals and use function for each of those objects?
[英]JS how to map through Array in template literals
我遇到了一個問題,今天無法解決。 比如有一個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 在模板文字中放在哪里?
會不會是:
let output = users.map((i) => {
return `<ul>
<li>ID: ${i.id} </li>
<li>Name: ${i.name}</li>
<li>Email: ${i.email}</li>
</ul>`;
});
您試圖訪問父數組上的值,與數組中的每個單獨元素相反。
試試這個:
users.map(user =>
`<ul>
<li>ID: ${user.id} </li>
<li>Name: ${user.name}</li>
<li>Email: ${user.email}</li>
</ul>`
);
模板文字應采用${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);
在您的 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);
您應該使用 'i' 變量來訪問對象屬性:
users.map((i) => {
return `<ul>
<li>ID: ${i.id} </li>
<li>Name: ${i.name}</li>
<li>Email: ${i.email}</li>
</ul>`
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.