Mapping over deep nested object array JSON file

Question

I have an nested JSON file that I'm trying to mapping from. As you can see in the JSON example and the return of my console.log below it returns object and I can't go further than that. (Please, keep in mind I still working on my JS knowledge...)

I need some help to map a nested object/array. One important notice, it's a map inside map.

Here is the GitHub repository: https://github.com/clovis-rosa/menu-data-mapping

To put more context on it, the result should look like the Footer of this website https://www.abstract.com/blog

Here is an example of JSON data that I'm trying to map from:

{
  "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"
        }
      ]
    }
  ]
}

He is my component where I'm trying to map the data:

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

Here is the result of my console.log. Right now I cant' go further than that to get inside 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

It will help if you explain in plain terms what you are trying to "map" as an implementation with logical errors cannot self-explain — GetSet
– GetSet, Commented Feb 5, 2021 at 16:20
maybe Object.entries() and Object.keys() is what you looking for — gugateider
– gugateider, Commented Feb 5, 2021 at 16:31
Thanks for the comment @gugateider. I already tried and didn't work. — Clovis Rosa
– Clovis Rosa, Commented Feb 5, 2021 at 16:54

Abhijeet Abnave · Accepted Answer · 2021-02-05 18:07:40Z

1

You were on right track, kudos to you! here is some help, you just needed to go one more nested loop further with accessing the appropriate map object and keys.

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

Here I have added the code and sample output you will able to figure it out.

answered Feb 5, 2021 at 18:07

Abhijeet Abnave

9019 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clovis Rosa · Accepted Answer · 2021-02-05 19:55:09Z

After destructuring the first node and it worked! Here the final result:

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

Thank you very much Abhijeet Abnave!

Collectives™ on Stack Overflow

Mapping over deep nested object array JSON file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related