映射深层嵌套对象数组 JSON 文件答案

【问题标题】：Mapping over deep nested object array JSON file映射深层嵌套对象数组 JSON 文件
【发布时间】：2021-02-05 16:17:51
【问题描述】：

我有一个试图从中映射的嵌套 JSON 文件。正如您在 JSON 示例中看到的那样，我的 console.log 在下面返回它返回 object，我不能再进一步了。（请记住，我仍在学习我的 JS 知识...）

我需要一些帮助来map 嵌套对象/数组。一个重要的通知，它是map 内的map。

这里是 GitHub 存储库：https://github.com/clovis-rosa/menu-data-mapping

为了提供更多上下文，结果应该类似于本网站的Footer https://www.abstract.com/blog

这是我尝试从map 发送的 JSON 数据示例：

{
  "data": [
    {
      "title": "Product",
      "id": "001",
      "url": [
        {
          "id": "012",
          "linkName": "How it Works",
          "linkUrl": "how-it-works"
        },
        {
          "id": "013",
          "linkName": "Enterprise",
          "linkUrl": "enterprise"
        },
        {
          "id": "014",
          "linkName": "Pricing",
          "linkUrl": "pricing"
        }
      ]
    },
    {
      "title": "Features",
      "id": "002",
      "url": [
        {
          "id": "022",
          "linkName": "Version Control",
          "linkUrl": "version-control"
        },
        {
          "id": "023",
          "linkName": "Design Collaboration",
          "linkUrl": "design-collaboration"
        },
        {
          "id": "024",
          "linkName": "Developer Handoff",
          "linkUrl": "developer-handoff"
        }
      ]
    },
    {
      "title": "Resources",
      "id": "003",
      "url": [
        {
          "id": "032",
          "linkName": "Getting Started",
          "linkUrl": "getting-started"
        },
        {
          "id": "033",
          "linkName": "Blog",
          "linkUrl": "blog"
        },
        {
          "id": "034",
          "linkName": "Books",
          "linkUrl": "books"
        }
      ]
    },
    {
      "title": "Community",
      "id": "004",
      "url": [
        {
          "id": "042",
          "linkName": "Twitter",
          "linkUrl": "twitter"
        },
        {
          "id": "043",
          "linkName": "LinkedIn",
          "linkUrl": "linkedin"
        },
        {
          "id": "044",
          "linkName": "Facebook",
          "linkUrl": "facebook"
        }
      ]
    },
    {
      "title": "Company",
      "id": "005",
      "url": [
        {
          "id": "052",
          "linkName": "About us",
          "linkUrl": "about-us"
        },
        {
          "id": "053",
          "linkName": "Careers",
          "linkUrl": "careers"
        },
        {
          "id": "054",
          "linkName": "Legal",
          "linkUrl": "legal"
        }
      ]
    }
  ]
}

他是我尝试map数据的组件：

export default function Footer() {
  const allFooterList = UseFooterDataQuery().allDataJson.edges

  return (
    <FooterSection>
      <FooterContainer>
        {allFooterList.map(({ node }) => {
          console.log(node, `====================> NODE`)
          return (
            <FooterWrap key={node.id}>
              <h3>{node.title}</h3>
              {node.data.map(data => {
                console.log(data, `====================> DATA`)
                return (
                  <ul key={data.id}>
                    <li>
                      <Link to={`/${data.linkUrl}`}>{data.linkName}</Link>
                    </li>
                  </ul>
                )
              })}
            </FooterWrap>
          )
        })}
      </FooterContainer>
      <FooterContainer>
        <p>© {new Date().getFullYear()}</p>
        <p>Built with Gatsby</p>
      </FooterContainer>
    </FooterSection>
  )
}

这是我的 console.log 的结果。现在我不能更进一步进入对象：

Object { id: "35707249-168b-511c-83a0-03724efc2108", data: (5) […] } ====================> NODE
Object { id: "001", title: "Product", url: (7) […] } ====================> DATA
Object { id: "002", title: "Features", url: (3) […] } ====================> DATA
Object { id: "003", title: "Resources", url: (7) […] } ====================> DATA
Object { id: "004", title: "Community", url: (5) […] } ====================> DATA
Object { id: "005", title: "Company", url: (3) […] } ====================> DATA

【问题讨论】：

如果你用通俗易懂的语言解释你试图“映射”的内容，因为逻辑错误的实现无法自我解释，这将有所帮助
@GetSet 感谢您的建议！
也许 Object.entries() 和 Object.keys() 就是你要找的东西
感谢@gugateider 的评论。我已经试过了，还是不行。

标签： javascript arrays json reactjs object

【解决方案1】：

你在正确的轨道上，向你致敬！这里有一些帮助，您只需要通过访问适当的地图对象和键进一步进行一个嵌套循环。

https://codesandbox.io/s/busy-mountain-z4pi9?file=/src/App.js

在这里，我添加了代码和示例输出，您将能够弄清楚。

【讨论】：

【解决方案2】：

解构第一个节点后，它工作了！这里是最终结果：

  return (
    <footer>
      <nav>
        {allFooterList.map(({ node }) => {
          return (
            <div key={node.id}>
              {node.data.map(data => {
                return (
                  <div key={data.id}>
                    <h3>{data.title}</h3>
                    {data.url.map(url => {
                      return (
                        <ul key={url.id}>
                          <li>
                            <Link to={`/${url.linkUrl}`}>{url.linkName}</Link>
                          </li>
                        </ul>
                      )
                    })}
                  </div>
                )
              })}
            </div>
          )
        })}
      </nav>
    </footer>
  )
}

非常感谢 Abhijeet Abnave！

【讨论】：