映射深度嵌套的 object 數組 JSON 文件

Question

我有一個嵌套的 JSON 文件，我正在嘗試從中映射。 正如您在 JSON 示例中看到的那樣，我的 console.log 在它下面的返回返回object而我不能 go 更進一步。 （請記住，我仍在學習我的 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 的結果。 現在我不能' go 比這更深入de object：

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

Answer 1

你走在正確的軌道上，向你致敬，這里有一些幫助。 您只需要通過訪問適當的 map object 和密鑰來再進一步嵌套循環 go 。

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

在這里，我添加了代碼和示例 output 您將能夠弄清楚。

Answer 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！