在JSON对象中循环，并将项目显示为无序列表

Question

我有一个fetch，它返回一个json对象，如下所示：

{
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "name",
"instant_invite": "link",
"channels": [
{
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "Altri Giochi",
"position": 8
},
{
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "Ascolto Musica",
"position": 11
},
],
"members": [
{
"id": "0",
"username": "xxxxxxxxxxxxxx",
"discriminator": "0000",
"avatar": null,
"status": "idle",
"avatar_url": "https://url"
},
],
"presence_count": 3

}

现在我正试图映射和显示所有这些项目，为我的网站制作一个无序列表，但我无法用这个.myResponse.map映射这个对象…我得到了一个错误"map不是函数"；。

我在这里肯定迷路了，我需要一些帮助来制作一个无序的列表，其中包含所有成员的姓名、头像和其他东西。

有人能帮我做这个吗？

Answer 1

您可以使用object.keys((循环遍历对象

let data = {
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "name",
"instant_invite": "link",
"channels": [{
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "Altri Giochi",
"position": 8
},
{
"id": "xxxxxxxxxxxxxxxxxxx2",
"name": "Ascolto Musica",
"position": 11
},
],
"members": [{
"id": "0",
"username": "xxxxxxxxxxxxxx",
"discriminator": "0000",
"avatar": null,
"status": "idle",
"avatar_url": "https://url"
},
{
"id": "1",
"username": "yyyyyyyyyyyyy",
"discriminator": "0000",
"avatar": null,
"status": "idle",
"avatar_url": "https://url"
},],
"presence_count": 3
}
data.members.forEach(m => {
// start the UL
let ul = "<ul class='member'>";
// loop through using Object.keys(m) or preset array of keys
['username','avatar'].forEach(md => {
ul += `<li>${md}: ${m[md]}</li>`;
})
ul += "</ul>";
document.querySelector('#members').innerHTML += ul;
})

<div id='members'></div>