在ID变化时将单个对象打印到DOM

时间:2015-10-03 16:20:49

标签: javascript jquery json node.js spotify

我正在开发一个JavaScript网络应用程序,它接受用户的输入(音乐艺术家的名字),并输出相关艺术家及其最受欢迎的歌曲列表,由Spotify API确定。我最初有这个功能的基本版本,但它只会发布所有相关艺术家的列表,其中包含相关艺术家最紧接的歌曲列表,我希望整个对象打印出来(艺术家加上大多数流行歌曲。)

我有一系列对象代表我通过带有Node.js和Browserify的spotify-web-api-js节点模块收到的艺术家,使其在浏览器上运行,由Spotify ID唯一标识。如果我在用户进行搜索之前事先不知道这些ID,我怎样才能遍历它们,以便我可以将它们正确地推送到一个对象中,然后我可以通过jQuery append输入到DOM?我一直试图以各种方式访问​​它们,但它似乎没有起作用:

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

以下是完整代码的链接(无法正常运行,因为它没有启用Node.js / browserify):https://jsfiddle.net/pmh04e99/

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:1)

您可以使用for in或使用Object.keys

前者将迭代对象的每个可枚举属性名称,并将该名称设置为指定的变量。然后,您可以使用该名称访问该对象的属性值。

后者将返回对象属性名称的数组。然后,您可以使用常规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);   
}