使用JavaScript中的数组获取对象的值

我有一个数组对象，它有一个键来标识每个数组。我想创建一个

render

函数，它可以将键的名称附加到HTML文档中的无序列表中，并为每个键附加一个新的无序列表，以及该键的每个值的列表

示例

<ul>
  <li>Key1</li>
    <ul>
      <li>Value1</li>
      <li>Value2</li>
    </ul>
  <li>Key2</li>
    <ul>
      <li>Value1</li>
      <li>Value2</li>
    </ul>
</ul>

问题

我能否在渲染函数的for循环中获取每个对象的键和值，以便在网页上显示一个列表，键作为类别，值作为播放列表名称

---

只需呈现对象名称，然后迭代其数组，例如：

function render(values) {    
    for(object in playslists) {
        // Fill list in HTML document.
        let genre = document.createElement('div');
        genre.innerHTML = object;
        list.appendChild(genre)
        for(record in playslists[object]){
          let entry = document.createElement('li');
          entry.innerHTML = playslists[object][record];
          list.appendChild(entry)
        }
    }
}

---

只需呈现对象名称，然后迭代其数组，例如：

function render(values) {    
    for(object in playslists) {
        // Fill list in HTML document.
        let genre = document.createElement('div');
        genre.innerHTML = object;
        list.appendChild(genre)
        for(record in playslists[object]){
          let entry = document.createElement('li');
          entry.innerHTML = playslists[object][record];
          list.appendChild(entry)
        }
    }
}

---

您可以使用

Array

和以下方法简化HTML的呈现：

let list=document.querySelector（“.list”）
让播放列表={
“流行音乐”：[
“反复流行音乐”，
“20世纪90年代最伟大的流行音乐”，
“2000年流行音乐之最”，
“2010年代流行音乐-最伟大”
],
“摇滚乐”：[
"循环摇滚乐",，
“90年代摇滚巨星”，
“2000年摇滚巨星”，
“2010年代摇滚巨星”
]
}
函数render（）{
list.innerHTML='
'+Object.keys（播放列表）.map（函数（k）{
返回k+'
'+播放列表[k]。加入（'
'）+'
'
}).join（'
'）+'
'
}
render（）

您可以使用以下方法简化HTML的呈现：

let list=document.querySelector（“.list”）
让播放列表={
“流行音乐”：[
“反复流行音乐”，
“20世纪90年代最伟大的流行音乐”，
“2000年流行音乐之最”，
“2010年代流行音乐-最伟大”
],
“摇滚乐”：[
"循环摇滚乐",，
“90年代摇滚巨星”，
“2000年摇滚巨星”，
“2010年代摇滚巨星”
]
}
函数render（）{
list.innerHTML='
'+Object.keys（播放列表）.map（函数（k）{
返回k+'
'+播放列表[k]。加入（'
'）+'
'
}).join（'
'）+'
'
}
render（）

可能的解决方案

let list=document.querySelector（'.list'），
p={
“流行音乐”：[
“反复流行音乐”，
“90年代流行歌曲”，
“2000年流行音乐之最”，
“2010年代流行音乐-最伟大”
],
“摇滚乐”：[
"循环摇滚乐",，
“90年代摇滚巨星”，
“2000年摇滚巨星”，
“2010年代摇滚巨星”
]
};
函数f（数据）{
Object.keys（p）.forEach（函数（v）{
var li=document.createElement（'li'），
ul=document.createElement（'ul'）；
p[v].forEach（函数（c）{
var li2=document.createElement（'li'）；
li2.textContent=c；
ul.儿童（li2）；
})
li.textContent=v；
李.儿童（ul）；
表1.儿童（李）；
})
}
f（p）



可能的解决方案


let list=document.querySelector（'.list'），
p={
“流行音乐”：[
“反复流行音乐”，
“90年代流行歌曲”，
“2000年流行音乐之最”，
“2010年代流行音乐-最伟大”
],
“摇滚乐”：[
"循环摇滚乐",，
“90年代摇滚巨星”，
“2000年摇滚巨星”，
“2010年代摇滚巨星”
]
};
函数f（数据）{
Object.keys（p）.forEach（函数（v）{
var li=document.createElement（'li'），
ul=document.createElement（'ul'）；
p[v].forEach（函数（c）{
var li2=document.createElement（'li'）；
li2.textContent=c；
ul.儿童（li2）；
})
li.textContent=v；
李.儿童（ul）；
表1.儿童（李）；
})
}
f（p）



函数中未使用
值
参数。您正在第二个for in循环中重新分配
值：
for（playslist[object]中的值）
函数中未使用
值
参数。您正在第二个for in循环中重新分配
值：
for（playslist[object]中的值）
非常感谢@gyre。很高兴提供帮助！祝你项目的其余部分好运。虽然这是正确的答案，我也会接受这样的答案，但是否有可能以某种方式编写它，以便我能够操纵每个
和
？添加类名之类的？当然！如果您给我一个示例
类
属性，我可以向您展示如何通过编辑来完成。看起来您知道如何使用
查询选择器
，所以只需在构建HTML后选择元素（但仍在
呈现
）然后在该点上对每个元素调用
addEventListener
。非常感谢@gyre。很高兴能提供帮助！祝你项目的其余部分好运。虽然这是正确的答案，我也会接受这样的答案，但是否有可能以某种方式编写它，以便我能够操纵每个
和
？添加类名之类的？当然！如果您给我一个示例
类
属性，我可以向您展示如何通过编辑来完成。看起来您知道如何使用
查询选择器
，所以只需在构建HTML后选择元素（但仍在
呈现
）然后在该点上对每个元素调用
addEventListener
。@gyre-我选择这个解决方案作为正确的解决方案，而不是你的，因为它比你的解决方案更符合我的要求。不过还是要谢谢你的帮助。：）谢谢@KimJørgensen，我感谢您的后续行动。如果我的HTML比裸标签更复杂，我也会这样做。@gyre-我选择这个解决方案作为正确的解决方案，而不是你的，因为它比你的更符合我的要求。不过还是要谢谢你的帮助。：）谢谢@KimJørgensen，我感谢您的后续行动。如果我的HTML比裸标签更复杂，我也会这样做。
Pop
- Recurrent Pop Music
- 1990s Pop - Greatest
- 2000s Pop - Greatest
- 2010s Pop - Greatest
Rock
- Recurrent Rock Music
- 1990s Rock - Greatest
- 2000s Rock - Greatest
- 2010s Rock - Greatest

function render(values) {    
    for(object in playslists) {
        // Fill list in HTML document.
        let genre = document.createElement('div');
        genre.innerHTML = object;
        list.appendChild(genre)
        for(record in playslists[object]){
          let entry = document.createElement('li');
          entry.innerHTML = playslists[object][record];
          list.appendChild(entry)
        }
    }
}