在JavaScript中获取带有数组的对象的值

Question

我有一个数组对象，它有一个键来标识每个Array。我想要创建一个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>

我的代码：

<div class="expandable">
  <ul class="list">

  </ul>
</div>

JavaScript

let list = document.querySelector('.list')

let playslists = {
    'Pop' : [
        'Recurrent Pop Music',
        '1990s Pop - Greates',
        '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.
    }
}

render()

问题

我是否可以在呈现函数的for-循环中获取每个对象的键和值，以便在网页上显示一个列表，其中键作为类别，值作为播放列表名？

流行音乐-流行音乐-90年代流行音乐-最伟大-2000年代流行-最伟大-2010年代流行-最伟大的摇滚-最经常摇滚乐-1990年代摇滚-最大-2000年代摇滚-最大-2010年代摇滚-最伟大的摇滚

Answer 1

可能的解决办法。

​

let list = document.querySelector('.list'),
  p = {
    'Pop': [
      'Recurrent Pop Music',
      '1990s Pop - Greates',
      '2000s Pop - Greatest',
      '2010s Pop - Greatest'
    ],
    'Rock': [
      'Recurrent Rock Music',
      '1990s Rock - Greatest',
      '2000s Rock - Greatest',
      '2010s Rock - Greatest'
    ]
  };

function f(data) {
  Object.keys(p).forEach(function(v) {
    var li = document.createElement('li'),
        ul = document.createElement('ul');
    p[v].forEach(function(c) {
      var li2 = document.createElement('li');
      li2.textContent = c;
      ul.appendChild(li2);
    })
    li.textContent = v;
    li.appendChild(ul);
    list.appendChild(li);
  })
}

f(p);

<div class="expandable">
  <ul class="list">

  </ul>
</div>

​

Answer 2

您可以使用Array方法(如map和join )简化HTML的呈现。

​

let list = document.querySelector('.list')

let playlists = {
  '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() {
  list.innerHTML = '<li>' + Object.keys(playlists).map(function(k) {
    return k + '<ul><li>' + playlists[k].join('</li><li>') + '</li></ul>'
  }).join('</li><li>') + '</li>'
}

render()

<div class="expandable">
  <ul class="list">

  </ul>
</div>

​

编辑:如果您想要向标记添加类和其他属性，下面是：

​

let list = document.querySelector('.list')

let playlists = {
  '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'
  ]
}

let OUTER_LI = '<li class="outer-list-item">'
let UL = '<ul class="inner-list">'
let INNER_LI = '<li class="inner-list-item">'

function render() {
  list.innerHTML = OUTER_LI + Object.keys(playlists).map(function(k) {
    return k + (UL + INNER_LI) + playlists[k].join('</li>' + INNER_LI) + '</li></ul>'
  }).join('</li>' + OUTER_LI) + '</li>'
}

render()

.outer-list-item {
  color: red;
}

.inner-list {
  border: .1em solid green;
}

.inner-list-item {
  color: blue;
}

<div class="expandable">
  <ul class="list">

  </ul>
</div>

​

Answer 3

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

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)
        }
    }
}

https://jsfiddle.net/me23dk3d/