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.

Answer 1

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