如何使用 Javascript 遍歷 JSON 文件

Question

我有以下 Javascript 文件：

var request = new XMLHttpRequest()

request.open('GET', 'http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=USERNAMEHERE&api_key=APIKEYHERE=json', true)
request.onload = function() {
  // Begin accessing JSON data here
  let data = JSON.parse(this.response);

  if(request.status == 200){

    for(let artist in data){
      console.log(artist.name);
    }

  } else {
    console.log('Failure to connect. Please verify username and try again.');
  }

}

request.send()

當我真的希望它打印出每個藝術家的名字時，該代碼會在控制台中打印出“未定義”。

以下是 JSON 文件的示例：

{
  "topalbums": {
    "album": [
      {
        "artist": {
          "url": "https://www.last.fm/music/City+and+Colour",
          "name": "City and Colour",
          "mbid": ""
        },
        "@attr": {
          "rank": "1"
        },
        "image": [
          {
            "size": "small",
            "#text": "https://lastfm.freetls.fastly.net/i/u/34s/dc4fdb888cf796679cfe421ca9bc5317.jpg"
          },
          {
            "size": "medium",
            "#text": "https://lastfm.freetls.fastly.net/i/u/64s/dc4fdb888cf796679cfe421ca9bc5317.jpg"
          },
          {
            "size": "large",
            "#text": "https://lastfm.freetls.fastly.net/i/u/174s/dc4fdb888cf796679cfe421ca9bc5317.jpg"
          },
          {
            "size": "extralarge",
            "#text": "https://lastfm.freetls.fastly.net/i/u/300x300/dc4fdb888cf796679cfe421ca9bc5317.jpg"
          }
        ],
        "playcount": "69",
        "url": "https://www.last.fm/music/City+and+Colour/Little+Hell+(Deluxe)",
        "name": "Little Hell (Deluxe)",
        "mbid": ""
      },
      {
        "artist": {
          "url": "https://www.last.fm/music/Various+Artists",
          "name": "Various Artists",
          "mbid": "4e46dd54-81a6-4a75-a666-d0e447861e3f"
        },
        "@attr": {
          "rank": "2"
        },
        "image": [
          {
            "size": "small",
            "#text": "https://lastfm.freetls.fastly.net/i/u/34s/d1ce625570a8d54f2af4da3decbf901c.jpg"
          },
          {
            "size": "medium",
            "#text": "https://lastfm.freetls.fastly.net/i/u/64s/d1ce625570a8d54f2af4da3decbf901c.jpg"
          },
          {
            "size": "large",
            "#text": "https://lastfm.freetls.fastly.net/i/u/174s/d1ce625570a8d54f2af4da3decbf901c.jpg"
          },
          {
            "size": "extralarge",
            "#text": "https://lastfm.freetls.fastly.net/i/u/300x300/d1ce625570a8d54f2af4da3decbf901c.jpg"
          }
        ],
        "playcount": "46",
        "url": "https://www.last.fm/music/Various+Artists/1+Am.+Study+Session",
        "name": "1 Am. Study Session",
        "mbid": ""
      },

我想要發生的是在控制台中打印每個藝術家的名字。 關於我做錯了什么的任何建議？ 感謝您抽出寶貴時間，如果有什么我可以添加的內容，請不要猶豫。

謝謝你。

Answer 1

查看您提供的 JSON 文件。 這整個對象就是您在data所擁有的。 就好像你直接寫了這個：

let data = { "topalbums": { ... } };

如果你有這種對象，你不能直接跳到三層深的數組。 JavaScript 不知道您想要向下幾層，迭代album並僅從數組中的每個元素中提取每個artist對象。 您需要明確地編寫所有這些內容。 您還想使用for..of迭代數組值，因為for..in只會讓您獲得鍵（如 0、1、2 等）。 下面是一個例子：

 let data = {"topalbums":{"album":[{"artist":{"url":"https://www.last.fm/music/City+and+Colour","name":"City and Colour","mbid":""},"@attr":{"rank":"1"},"image":[{"size":"small","#text":"https://lastfm.freetls.fastly.net/i/u/34s/dc4fdb888cf796679cfe421ca9bc5317.jpg"},{"size":"medium","#text":"https://lastfm.freetls.fastly.net/i/u/64s/dc4fdb888cf796679cfe421ca9bc5317.jpg"},{"size":"large","#text":"https://lastfm.freetls.fastly.net/i/u/174s/dc4fdb888cf796679cfe421ca9bc5317.jpg"},{"size":"extralarge","#text":"https://lastfm.freetls.fastly.net/i/u/300x300/dc4fdb888cf796679cfe421ca9bc5317.jpg"}],"playcount":"69","url":"https://www.last.fm/music/City+and+Colour/Little+Hell+(Deluxe)","name":"Little Hell (Deluxe)","mbid":""},{"artist":{"url":"https://www.last.fm/music/Various+Artists","name":"Various Artists","mbid":"4e46dd54-81a6-4a75-a666-d0e447861e3f"},"@attr":{"rank":"2"},"image":[{"size":"small","#text":"https://lastfm.freetls.fastly.net/i/u/34s/d1ce625570a8d54f2af4da3decbf901c.jpg"},{"size":"medium","#text":"https://lastfm.freetls.fastly.net/i/u/64s/d1ce625570a8d54f2af4da3decbf901c.jpg"},{"size":"large","#text":"https://lastfm.freetls.fastly.net/i/u/174s/d1ce625570a8d54f2af4da3decbf901c.jpg"},{"size":"extralarge","#text":"https://lastfm.freetls.fastly.net/i/u/300x300/d1ce625570a8d54f2af4da3decbf901c.jpg"}],"playcount":"46","url":"https://www.last.fm/music/Various+Artists/1+Am.+Study+Session","name":"1 Am. Study Session","mbid":""}]}}; for(let album of data.topalbums.album){ console.log(album.artist.name); }