Javascript 深度嵌套对象数组JSON文件上的映射

我有一个嵌套的JSON文件，我正试图从中映射。正如您在JSON示例和下面my console.log的返回中所看到的，它返回

object

，我不能再进一步了。（请记住，我仍在努力学习JS知识…）

我需要一些帮助来映射嵌套对象/数组。一个重要的注意事项是，它是

map

内部的

map

这是GitHub存储库：

https://github.com/clovis-rosa/menu-data-mapping

为了增加上下文，结果应该类似于此网站的

Footer

https://www.abstract.com/blog

下面是我试图映射的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"
        }
      ]
    }
  ]
}

他是我试图映射数据的组件：

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

---

你走对了，真是太好了！这里有一些帮助，您只需要访问适当的映射对象和键，进一步执行一个嵌套循环

---

在这里，我添加了代码和示例输出，您将能够找到它。

在对第一个节点进行分解之后，它就工作了！最后的结果如下：

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

返回(
{allFooterList.map（{node}）=>{
返回(
{node.data.map（数据=>{
返回(
{data.title}
{data.url.map（url=>{
返回(


{url.linkName}


)
})}
)
})}
)
})}
)
}

---

非常感谢阿比吉特·艾布纳夫

如果您能简单地解释一下，作为一个逻辑错误的实现，您试图“映射”什么，这会有所帮助-explain@GetSet谢谢你的建议！也许

Object.entries（）

和

Object.keys（）

是您寻找注释@gugateider的原因。我已经试过了，但没有成功。

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