How to read a nested JSON in React?

Question

I've been searching for a good answer for a while but couldn't find any. So I'm having this problem where I have a JSON file and I'd like to read the data from it in React.

The JSON looks somewhat like this:

{
"cats": [
    {
        "id": 1,
        "name": "Cat1",
        "age": 3
    },
    {
        "id": 2,
        "name": "Cat2",
        "age": 2
    }
],
"dogs": [
    {
        "id": 3,
        "name": "Dog1",
        "age": 5
    },
    {
        "id": 4,
        "name": "Dog2",
        "age": 2
    }
]
}

How can I read this JSON into a react state so that I can have all the cats and dogs and all their data but I can always tell if it was a cat or dog?

So right now I have 2 different states:

this.state = {
  cats: data.cats,
  dogs: data.dogs,
};

I can map these into a list but I don't have a way to tell what they are. Is there a way to keep what they are?

I hope it makes sense...

Thanks!

The list name name will always tell you if you're searching in the dog's list or the cat's list. — Reda Meskali
– Reda Meskali, Commented Nov 27, 2018 at 18:25
Try to first process datas, and add a type :"dog|cat" in each JSON objects, and then concat each array in a single one. That should work — Noki
– Noki, Commented Nov 27, 2018 at 18:32

Solo · Accepted Answer · 2018-11-27 18:43:24Z

I think I understand the question..

How item knows what type it is?

You already know the type if you iterate them.

this.state.dogs.map((dog, i) => {
  // I know this is dog
  return <Item key={i} {...dog} />;
})

this.state.cats.map((cat, i) => {
  // I know this is cat 
  return <Item key={i} {...cat} />;
})

Inside the component? Use separate components, then you know which is which.

this.state.dogs.map((dog, i) => {
  return <DogItem key={i} {...dog} />;
})

this.state.cats.map((cat, i) => {
  return <CatItem key={i} {...cat} />;
})

Are you reusing component? Pass type as property.

this.state.dogs.map((dog, i) => {
  return <Item key={i} type="dog" {...dog} />;
})

this.state.cats.map((cat, i) => {
  return <Item key={i} type="cat" {...cat} />;
})

XPowerDev · Accepted Answer · 2018-11-27 18:28:45Z

0

You can use

this.setState({
cats: data.cats,
dogs: data.dogs
})

answered Nov 27, 2018 at 18:28

XPowerDev

1641 silver badge6 bronze badges

Comments

weibenfalk · Accepted Answer · 2018-11-27 18:32:09Z

0

Don't fully understand your question i admit. =) You have the type of cat or dog in your state properties. So if you for example map over the dog array you know that it is the dogs your'e mapping through. If what you mean is that you want to show in your list somehow if it's a cat or a dog you can just add it in your list for example like so:

this.state.dogs.map( (dog, i) => return <li key={i}>Dog: {dog.name}</li>)

answered Nov 27, 2018 at 18:32

weibenfalk

9027 silver badges10 bronze badges

1 Comment

dragi Over a year ago

Basically when I list the items I get the id, name and age values but when I try to pass this item to another component, I have no way to tell that if it's a cat or dog because I only have the id, name and age there. Does this make sense?

misraX · Accepted Answer · 2018-11-27 18:35:52Z

0

class Draw extends React.Component {
 static defaultProps {
 dogs: data.dogs,
 cats: data.cats
  }

 render(){
   const {dogs, cats} = this.props;
   return(<div>{dogs.map((value, index)=>value.id)}</div>)
  }
 }

value.id can be value.name or any nested html you want.

answered Nov 27, 2018 at 18:35

misraX

9856 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to read a nested JSON in React?

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Linked

Related