iterate through multinested json object with for loop

Question

I've been trying to loop through a mulitnested json object but everytime it displays undefined. I've wanted to display playcount and the name of the song. I plan on using this with a bar chart.

I tried this expecting ['playcount', 'name']
function getData(){
    $("#output").html("<b>hi there</b>");
    $.getJSON('https://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=drake&api_key=22102f7d3a814de0736edf670bd2c771&format=json',function(result){
        console.log(result);
        let testarray = result[0]['album'];
        let newdata = [];
        for (let i = 0; i < result.length; i++) {
            testarray= result[i]['album']
            console.log(testarray)
                let item = []
                item[0] = testarray[i]['playcount']
                item[1] = testarray[i]['name']
                newdata[j] = item

            
        console.log(newdata);
    }
     console.log(newdata)
    })
    
}

Answer 1

Let's first take a look at the data you are working with:

result = {
  "topalbums":
  {
    "album": 
    [
      {
        "name": "So Far Gone",
        "playcount": 12543719,
        "mbid": "f05567cc-6ed3-40e0-bad1-7812478eecbe",
        "url": "https://www.last.fm/music/Drake/So+Far+Gone",
        "artist": { ... }
        "image": [ ... ]
      },
      ...
    ],
    "@attr": { ... }
  }
}

You are gettin an object that has a property with a key called topalbums. Top albums has two properties; an array called album and an object called @attr.
From the looks of it, you want to access the objects inside of the album array, and more specifically name and playcount.

Given the data you are working with I assume this is what you would be looking for:

let newdata =
[
  {
    "playcount": 123123
    "name": "album name1"
  },
  {
    "playcount": 12456543
    "name": "album name2"
  },
  ...
]

To achieve this you can alter your code in the following fashion:

function getData(){
    $("#output").html("<b>hi there</b>");
    $.getJSON('https://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=drake&api_key=22102f7d3a814de0736edf670bd2c771&format=json',function(result){
        console.log(result);
        let albumArray = result["topalbums"]["album"]; // This gets you the album array
        let newdata = [];
        for (let i = 0; i < albumArray.length; i++) {
            const albumSummary = {} // Create a new object
            albumSummary["name"] = albumArray.name // Add name to the object
            albumSummary["playcount"] = albumArray.playcount // Add playcount to the object
            newdata.push(albumSummary) // Add the object to the array
        }
        console.log(newdata)
    })
}

Alternatively, if you don't want an array of objects but an array of arrays like this [['playcount', 'name']...], you can alter the code above like this:

function getData(){
    $("#output").html("<b>hi there</b>");
    $.getJSON('https://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=drake&api_key=22102f7d3a814de0736edf670bd2c771&format=json',function(result){
        console.log(result);
        let albumArray = result["topalbums"]["album"]; // This gets you the album array
        let newdata = [];
        for (let i = 0; i < albumArray.length; i++) {
            const albumSummary = [] // Create a new array
            albumSummary.push(albumArray.name) // Add name to the array
            albumSummary.push(albumArray.playcount) // Add playcount to the array
            newdata.push(albumSummary) // Add the array to the array
        }
        console.log(newdata)
    })
}

Hope this helps!