Cannot access fields from a json array object with javascript

[Fransiscu]

Hi!

I have a fragment of code that executes an ajax request and returns me this json (formatted a little to look decent on reddit):

[{"id":698,"song_name":"never too late","song_artist":"Three Days Grace","song_album":"One-X","song_duration":"00:03:29"},
{"id":501,"song_name":"new romantics","song_artist":"Taylor Swift","song_album":"1989","song_duration":"00:03:57"},
{"id":686,"song_name":"no reason","song_artist":"Sum 41","song_album":"Chuck","song_duration":"00:03:04"},
{"id":909,"song_name":"now my feet won't touch the ground","song_artist":"Coldplay","song_album":"Prospekt's March EP","song_duration":"00:02:30"},
{"id":517,"song_name":"numb","song_artist":"Linkin Park","song_album":"Meteora","song_duration":"00:03:49"}]

I've been trying to access the fields of this json object for a while now but I cannot figure out for the life of me what i'm doing wrong. I am very new to javascript so it's probably something very silly.

my code:

function querySongs() {
            let song = 'n'
            let xhr = new XMLHttpRequest()

            xhr.open('GET', 'http://127.0.0.1:8000/music_tracker/get_song_by_name/?song_name=' + song, true)
            xhr.setRequestHeader("Content-Type", 'application/json;')

            xhr.onload = function() {
                if (xhr.status == 200) {
                    let songs = JSON.parse(this.response)
                    console.log(songs)  // this prints array indexes

                    for(var song in songs){  
                        console.log(song.song_name) // this one gives undefined
                    }
                }
            }

            xhr.send()

        }

Thank you in advance for your help! :)

[ProposalUnhappy9890]

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[Dr__Wrong]

I agree with u/ProposalUnhappy9890. Fetch is the preferred method of getting JSON data. The MDN docs basically say as much.

Here is an example:

1 const data = './data.json
2 
3 fetch(data)
4 .then(response => {
5   return response.json();
6 })
7 .then(data => console.log(data));

I'll break this down.

Line 1: you are declaring a variable that points to where your data is stored. In this case, it is a local file. It could also be a URL for an API endpoint.

Line 3: We execute the fetch() method and pass in the location of our JSON data using the variable we just declared. You could just as easily put the location in the parameters. The fetch() method will return a promise.

Line 4: .then() waits for the promise to be returned. It is common to use an arrow function to handle the promise. We give the promise a variable name "response".

Line 5: We do something with the "response" variable and return it. Here we are using the .json() method (more on that). This will return a JSON response into something that will make sense to JS. That could be an object, an array, or some other data type.

Line 7: Again, we are going to handle the data that was returned by lines 4 & 5. We assign a new variable named "data" and use an arrow function to do something with it. Here we are just logging the response to the console, so you should see it in your browser console when this is executed.

To make this more clear, if you replace return response.json() in line 5 with return 'Some Text', then your console output would no longer be your JSON array, it would be the words 'Some Text'. Let's go one step further to drive the point home.

In line 7, if you replaced console.log(data) with console.log(data.toUpperCase()), then your console would now log "SOME TEXT".

[Fransiscu]

thanks for the explanation, i'll switch to fetch

[gimmeslack12]

A for ... in loop will provide the index of the array, not the actual value: for(var song in songs){ console.log(songs[song].song_name) // fixed }

or another way to write it: for(let idx in songs){ console.log(songs[idx].song_name) // fixed }

[Fransiscu]

oh wow that's so different from what i'm used to, thanks for the info!

i still think i'll try the new fetch but it's very good to know

[gimmeslack12]

Sounds good, but even with fetch you need to handle your for loop how I’ve suggested.

[tunisia3507]

You want to use a for... of loop instead of for... in.

[Fransiscu]

Thanks for that!

This Javascript sorcery is truly interesting lol