Iterating over nested data JS

Question

I'm a little bit new to programming and very new to JS so I apologize for the beginner question.

I'm trying to iterate through this data and get each tracks name and artist but I'm having an issue. Currently I'm trying something like this.

If anybody has any insight or suggestions I would appreciate it greatly.

I'm using a rails backend with JS frontend. Thank you!

function selectTracks(){
      fetch(BACKEND_URL)
      .then(response => response.json())
      .then(playlist  => {
          playlist.data.forEach(playlist => {                        
            `<h4> ${playlist.attributes.track.name}</h4>
            <h4>${playlist.attributes.track.artist}></h4>  `
            // let newPlaylist = new Playlist(playlist, playlist.attributes) 
            console.log(fetch)
          //  document.getElementById("playlist-container").innerHTML += newPlaylist.renderPlaylistCard();
           debugger
          }
      )}
  )
}

My serializer looks like this

{
  data: [
    {
      id: "1",
      type: "playlist",
      attributes: {
        name: "Country Songs",
        id: 1,
        track_id: 10,
        track: {
          id: 10,
          name: "First Song",
          artist: "Randy",
          created_at: "2020-06-17T02:09:07.152Z",
          updated_at: "2020-06-17T02:09:07.152Z"
        }
      },
      relationships: {
        track: {
          data: {
            id: "10",
            type: "track"
          }
        }
      }
    }
  ]
}

Answer 1

You need to replace forEach with map . The 'forEach loop doesn't return anything. But the loop doesn't return anything. But the map method return an array. (An array of HTML elements in your case method return an array. (An array of HTML elements in your case

fetch(BACKEND_URL)
      .then(response => response.json())
      .then(playlist  => {
          return playlist.data.map(playlist => {                        
            `<h4> ${playlist.attributes.track.name}</h4>
            <h4>${playlist.attributes.track.artist}></h4>  `
            // let newPlaylist = new Playlist(playlist, playlist.attributes) 
            console.log(fetch)
          //  document.getElementById("playlist-container").innerHTML += newPlaylist.renderPlaylistCard();
           debugger
          }
      )}
  )

Answer 2

Your code technically works assuming that the BACKEND_URL is correct and the json is valid. But, in its current state, it doesn't do anything with the data. If you output the h4 tags, for instance, you should see them written to the screen.

document.write(
  `<h4> ${playlist.attributes.track.name}</h4>
   <h4>${playlist.attributes.track.artist}</h4>  `
)

Or alternatively you could log the values out to prove that you are processing the data correctly:

console.log(playlist.attributes.track.name, playlist.attributes.track.artist)

If not, the next thing to check is the validity of your json. I'm assuming that you copied your json from the browser which will strip some quotes for readability. View the source to ensure that the key names are correctly wrapped in quotes like this:

{
  "data": [
    {
      "id": "1",
      "type": "playlist",
      "attributes": {
        "name": "Country Songs",
...

If you are using ActiveModel Serializers, they should be formatted correctly.

If your json is valid and you can write the h4 tags to the page with the correct data in them, then the problem probably lies in your Playlist class.

Another handy tool for diagnosing fetch() problems is in Chrome Developer Tools. Go to the Network and click the XHR filter. This will allow you to inspect the fetch request and see if the response is valid and the data is what you expect. Other browsers have a similar feature.