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"
          }
        }
      }
    }
  ]
}

thealpha93 · Accepted Answer · 2020-06-19 03:28:19Z

1

You need to replace forEach with map. The 'forEachloop doesn't return anything. But themapmethod 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
          }
      )}
  )

answered Jun 19, 2020 at 3:28

thealpha93

7884 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thealpha93 Over a year ago

let me know if it helps

Randy Over a year ago

Hey @TheAlpha93 I'm still having issues with this. Any other advice? I have my constructor set up in my class but the only way I can access the tracks currently are like this; playlistAttributes.tracks[0].title but I need to get all of them. I am really struggling with using map and other collection processing methods in JS currently. Thanks.

Dave Kruse · Accepted Answer · 2020-06-22 17:21:51Z

0

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.

answered Jun 22, 2020 at 17:21

Dave Kruse

1194 bronze badges

1 Comment

Randy Over a year ago

Thank you for the tips! I'm using the fastjson-api so I think the json data is correct. I believe I am doing something wrong in the playlist class.

Collectives™ on Stack Overflow

Iterating over nested data JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related