How to iterate through a JSON file with Javascript

Question

I have the following Javascript file:

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

That code prints out 'undefined' in the console when I really want it to print out each artists name.

Here is an example of the JSON file:

{
  "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": ""
      },

What I want to happen is to have the name of each artist printed in the console. Any suggestions as to what I am doing wrong? Thank you for your time and if there is anything I can add for clarity, please don't hesitate.

Thank you.

Does this answer your question? [How to get the response of XMLHttpRequest?](https://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest) — Heretic Monkey, Feb 14 '20 at 20:58
`for (let album of data.topalbums.album)` (notice the use of `of` instead of `in`, and the dot notation to access the `album` Array in the data). And then `console.log(album.artist.name)` — blex, Feb 14 '20 at 20:59
Can you clarify- is that JSON example an actual example of the response from your request? I ask because it seems to be returning Top Albums, and your URL mentions "top artists": `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=USERNAMEHERE&api_key=APIKEYHERE=json` — Bashu Naimi-Roy, Feb 14 '20 at 20:59

score 1 · Answer 1 · answered Feb 14 '20 at 21:04

Take a look at the JSON file you gave. This entire object is what you have in data. It's as if you wrote this directly:

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

If you had this kind of object, you can't skip directly to the array three levels deep. JavaScript doesn't know you want to go down a few levels, iterate over album, and pull only each artist object from each element in the array. You need to write all these things explicitly. You also want to use for..of to iterate over array values, as for..in will only get you keys (like 0, 1, 2, etc). Here's an example:

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

How to iterate through a JSON file with Javascript

1 Answers1