Accessing data of a JSON file in React

Question

Hey guys Im trying to make a menu that renders the menu items from this json data.

Im doing this using react so just trying to get the correct syntax around it, here is the data,

 {
        "name": "menu",
        "children": [
          {
            "title": "Account",
            "children": [
              {
                "name": "Preferences"
              },
              {
                "name": "Contact Details"
              },
              {
                "name": "Manage Users"
              }
            ]
          },
          

          {
            "title": "Design",
            "children": [
              {
                "name": "Themes"
              },
              {
                "name": "Gallery"
              },
              {
                "name": "Templates"
              }
            ]
          },

currently I'm mapping over it and can only get access to the title,

 {menu.map((item, i) => (
        <div key={i}>
          <h2>{item.title}</h2>
        </div>
      ))}
    </div>

whats the correct way to get access to the children array within the data so I can then render out the items with an onclick or something ?

cheers

You need to loop on menu.children. Please check the answer.

Babar Khan
– Babar Khan

2021-05-27 05:47:54 +00:00
Commented May 27, 2021 at 5:47 — Babar Khan
– Babar Khan, Commented May 27, 2021 at 5:47

Will Walsh · Accepted Answer · 2021-05-27 05:46:12Z

2

You will need to use another .map function within to map through the children.

{menu.map((item, i) => (
  <div key={i}>
    <h2>{item.title}</h2>
    {item.children.map((item, i) => (
      <h4>{item}</h4>
    ))}
  </div>
))}

answered May 27, 2021 at 5:46

Will Walsh

2,1941 gold badge9 silver badges15 bronze badges

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

Comments

Ihsan Fajar Ramadhan · Accepted Answer · 2021-05-27 05:45:56Z

0

you can simply call the children inside the map, for the example

{menu.map((item, i) => (
        <div key={i}>
          <h2>{item.title}</h2>
          {item.children.map(child => <p>{child.name}</p>}
        </div>
      ))}
    </div>

answered May 27, 2021 at 5:45

Ihsan Fajar Ramadhan

1,1111 gold badge12 silver badges20 bronze badges

Comments

Babar Khan · Accepted Answer · 2021-05-27 06:13:24Z

0

here is your updated code

{menu.children.map((item, i) => (
    <div key={i}>
      <h2>{item.title}</h2>
     {item.children.map((item, i) => (
       <h4>{item.name}</h4>
     ))}
    </div>
  ))}
</div>}

https://codesandbox.io/s/modest-dust-po682?file=/src/App.js

edited May 27, 2021 at 6:13

answered May 27, 2021 at 5:46

Babar Khan

3502 silver badges8 bronze badges

4 Comments

James Wuhan Over a year ago

still receiving. Cannot read property 'map' of undefined

Babar Khan Over a year ago

check this codesandbox.io/s/modest-dust-po682?file=/src/App.js @JamesWuhan

James Wuhan Over a year ago

ok yes I understand that and have access to the title, but then how do you get access to the "name" sub categories in the children array within it? thanks I will then give you the answer

Babar Khan Over a year ago

@JamesWuhan Hey James, Please mark the answer and vote up. Thanks.

Collectives™ on Stack Overflow

Accessing data of a JSON file in React

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related