迭代嵌套数据 JS

Question

我对编程有点陌生，对 JS 也很陌生，所以对于初学者的问题，我深表歉意。

我正在尝试遍历这些数据并获取每个曲目的名称和艺术家，但我遇到了问题。目前我正在尝试这样的事情。

如果有人有任何见解或建议，我将不胜感激。

我正在使用带有 JS 前端的 rails 后端。谢谢！

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

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 标签写入包含正确数据的页面，那么问题可能出在您的 Playlist 类。

另一个诊断 fetch() 问题的便捷工具是 Chrome 开发者工具。转到网络并单击 XHR 过滤器。这将允许您检查获取请求并查看响应是否有效以及数据是否符合您的预期。其他浏览器也有类似的功能。