1

I am having trouble finding a way to iterate through this JSON file. The JSON is acquired after calling an API.

I would like to use this JSON for mapping and create components from it.

Problem: How do I navigate through nested JSON and map it?

JSON Format

The JSON format that i received is just as below. I cannot change the file as it is called from an API.

{"animals":{

"dogs":{
    "name": "rex", (required)
    "breed": "yorkshire"}

"cats":{
    "name": "tom", (required)
    "breed": "sphinx"}

    }
}

Goal

Since mapping can be done in an array of objects, the ideal case would be [{dogs},{cats}].

var json = *serializableJSONFormat*
json.map((item)=>{
            <MenuItem value={item.name}>{item.name}</MenuItem>
          })
Improve this question
4
  • can you also write output format, how do you want to format the json Commented Nov 23, 2020 at 17:14
  • You probably want the "cats" and "dogs" values to be an array instead of an Object? Commented Nov 23, 2020 at 17:14
  • 1
    What do you want to map to what? Start with defining what the input is and what you expect the output to be. Do you know which keys to expect in the JSON or not? If not, you want to loop over the keys and map those values. If you do know and it are only a few, you can just do a loop for each key. Currently your "Goal" is some kind of mapping function, not the expected output. What is an item in this case? Commented Nov 23, 2020 at 17:15
  • because the mapping is done inside the return(), whenever i put for loops inside, it will show an error instead. So how do I make the json into an array of objects [{dogs},{cats}] in order to map it easily to create the MenuItem components? Commented Nov 23, 2020 at 17:20

2 Answers 2

Reset to default
1

Assuming your JSON is structured like

{"animals":{

"dogs": [
    {
      "name": "rex",
      "breed": "yorkshire"
    }
  ],

"cats":[
    {
      "name": "tom",
      "breed": "sphinx"
    }    
  ]
}

(And therefore assuming that every key has an array as value.)

You can loop over all keys and map the arrays

menuItems = [];
animals = YOUR_JSON["animals"];
Object.keys(animals).forEach((key) => {
  menuItems = menuItems.concat(animals[key].map((item)=>{
    <MenuItem value={item.name}>{item.name}</MenuItem>
  }));
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

what if the json structure was as stated in the question? sorry for the trouble.
@montoon88, No trouble ;). If the JSON is as in the question every category of animals can only contain a single animal. "dogs": { name: "woof" } vs "dogs": [ {name: "woof"}, { name: "buster"} ]
@montoon88 but if that's what you want, you can remove the .concat function around the map and just do item.name on each value in "animals".
btw, i just tried your solution. and let me just say, tears came out hhahah thanks!
1

Perhaps you would like something like this:

Object.keys(json["animals"]).map(key => {

  return (
    <MenuItem 
      value={json["animals"][key]["name"]}
    >
      {json["animals"][key]["name"]}
    </MenuItem>
  )
})

But as the comments on our questions said, it'd be easier if the "animals" property was an array instead.

Improve this answer

4 Comments

the json format is set by the API, so i can't change it myself. Will try out your solution. Thanks!
after trying this solution, Object.keys(json["animals"]) returns an array of the keys only. Hence, the array only contains "dogs" and "cats", instead of the whole object
Yes, but you can use that to iterate over the objects in the json. I made a mistake in my answer. I edited it, try the updated version.
I see i see, i understand the approach you are going for, but then the results i got is an array of undefined. Will check if i did anything wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.