当 ID 不同时将单个对象打印到 DOM

Question

我正在开发一个 JavaScript 网络应用程序，该应用程序接受用户的输入（音乐艺术家的姓名）并输出相关艺术家及其最受欢迎歌曲的列表，由 Spotify API。我最初有这个功能的基本版本，但它只是 post 所有相关艺术家的列表，上面紧接着是这些相关艺术家最受欢迎的歌曲列表，我希望整个对象都打印出来（艺术家加上最受欢迎的歌曲）。

我有一系列代表艺术家的对象，这些对象是我通过 spotify-web-api-js 节点模块收到的，带有 Node.js 和 Browserify 以使其在浏览器上运行，由他们的 Spotify ID 唯一标识。如果我在用户进行搜索之前不知道这些 ID，我该如何循环遍历它们，以便我可以将它们正确地推入一个对象，然后我可以通过 jQuery 输入到 DOM的append？我一直在尝试以各种方式访问它们，但它似乎不起作用：

s.getArtistRelatedArtists(originalArtistId, function(err, data) {

  for (i = 0; i < data.artists.length; i++)
  {
      console.log(data.artists[i].name);
      relatedArtistsObject[data.artists[i].id] = {
        name: data.artists[i].name,
        songs: []
      };
      s.getArtistTopTracks(data.artists[i].id, "US", function (err, data2) {
          if (relatedArtistsObject[data2.tracks[0].artists[0].id] !== undefined)
          {
          // console.log(data2.tracks[0].name); -- this outputs the song titles I want
            relatedArtistsObject[data2.tracks[0].artists[0].id].songs.push(data2.tracks[0].name);

          }
      });
  }
 console.log(relatedArtistsObject);
 // loop through this object and print it through the screen
 for (k = 0; k < relatedArtistsObject.length; k++)
 {

   console.log(relatedArtistsObject.id.songs[0].name);
   $('#related-artist').append(relatedArtistsObject[k]);

 }
  //  $('#related-artist').append(relatedArtistsObject);
 });

这是完整代码的 link（因为没有启用 Node.js/browserify 而无法运行）：https://jsfiddle.net/pmh04e99/

This answer 有部分帮助，但不适用于此处，因为 JSON 输出在我要访问的数组中没有 "name" 字段。相反，songs是1的数组，我要的内容在0项内。 relatedArtistsObject 的 console.log 输出如下所示，例如：

当我现在不知道 spotify ID 时，如何通过我的代码访问 DOM 中的这些对象？

注意：我知道我还没有错误处理，但我希望能够先实现主要功能。

Answer 1

您可以使用 for in or use Object.keys。

前者将遍历对象的每个可枚举属性名称，并将该名称设置到指定的变量中。然后您可以使用该名称访问该对象的属性值。

后者将 return 对象的属性名称数组。然后，您可以使用常规 for 循环遍历该数组并将数组中的每个值用作 id

对于...在

for(id in relatedArtistsObject){
  var artist = relatedArtistsObject[id];
  console.log(artist.name,artist.songs);
}

Object.keys

var ids = Object.keys(relatedArtistsObject);
for(var i=0; i<ids.length; i++){
  var artist = relatedArtistsObject[ids[i]];
  console.log(artist.name,artist.songs);   
}

当 ID 不同时将单个对象打印到 DOM

Printing individual objects to a DOM when their IDs vary

javascript

jquery

json

spotify

node.js