Итерация по вложенным данным JS

Question

Я немного новичок в программировании и очень новичок в JS, поэтому прошу прощения за вопрос новичка.

Я пытаюсь перебрать эти данные и получить имя каждого трека и исполнителя, но у меня проблема. Сейчас пробую что-то вроде этого.

Если у кого-нибудь есть идеи или предложения, я был бы очень признателен.

Я использую бэкэнд rails с интерфейсом JS. Спасибо!

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

Мой сериализатор выглядит так

{
  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

Вам необходимо заменить forEach на map. Карта forEach loop doesn't return anything. But the 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

Технически ваш код работает при условии, что BACKEND_URL правильный, а json действительный. Но в текущем состоянии он ничего не делает с данными. Например, если вы выводите теги h4, вы должны увидеть их записанными на экран.

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

Или, в качестве альтернативы, вы можете зарегистрировать значения, чтобы доказать, что вы обрабатываете данные правильно:

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

Если нет, то следующее, что нужно проверить, - это действительность вашего json. Я предполагаю, что вы скопировали свой json из браузера, который удалит некоторые кавычки для удобства чтения. Просмотрите исходный код, чтобы убедиться, что имена ключей правильно заключены в кавычки, например:

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

Если вы используете сериализаторы ActiveModel, они должны быть отформатированы правильно.

Если ваш json действителен, и вы можете записать теги h4 на страницу с правильными данными в них, тогда проблема, вероятно, кроется в вашем классе списка воспроизведения.

Другой удобный инструмент для диагностики проблем fetch () находится в Chrome Developer Инструменты. Go в Сеть и щелкните фильтр XHR. Это позволит вам проверить запрос на выборку и увидеть, является ли ответ действительным и данные соответствуют вашим ожиданиям. В других браузерах есть аналогичная функция.