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? — Heretic Monkey
– Heretic Monkey, Commented Feb 14, 2020 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
– blex, Commented Feb 14, 2020 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
– Bashu Naimi-Roy, Commented Feb 14, 2020 at 20:59

Klaycon · Accepted Answer · 2020-02-14 21:04:11Z

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

Collectives™ on Stack Overflow

How to iterate through a JSON file with Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related