how to loop through a nested dictionary or json data in Reactjs

Question

Using Reactjs how do you create a function component that loop through the json data below and display location content.

I want the function to also be able to display something else like members if needed.

I am new to react and most examples online show it using class component (which i am not interested into)

data.json

[{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "authorization": "Black card",
      "location": [
        "Next",
        "Previous",
        "Here"
      ]
    }
  ]
}]

Answer 1

You can map through data in a functional component the same way you would map through a class component. For this example, you could list only nested data:

 const List = () => { return ( <div> {data.map(item => (item.members || []).map(member => (member.location || []).map(item => (<div>{item}</div>)) ) )} </div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

which would list only the nested "location" data for each member if that property exists. Or you could map through data and display top-level properties and then also map through its nested properties:

 const List = () => { return ( <div> {data.map(item => ( ((item.members || []).map(member => ( <div> {member.name || ''} {member.location && member.location.map(loc => (<div>{loc}</div>))} </div> ))) ))} </div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Of course that I cant make an entire project solution for you but the function that you wanted must have this kind of logic.

 const jsonData = [{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "authorization": "Black card", "location": [ "Next", "Previous", "Here" ] } ] }] jsonData.forEach(item=>{ item.members.map((member)=>{ if(member.location&&member.location[0]){ //Do whatever, maybe you want to use return statement in there console.log(member.location) } else{ //do something else, or add more conditions console.log("There's no location in it") } }) })

you can put it in a variable and add your variable inside your jsx return statement or use it directly in middle of your function's return statement.

Good luck.