Access Data in nested JSON API Object in react

Question

I have this Data in a JSON-Api but my react app does not want to let get the values from the nested Objects.

[
  {
    "_id": "61715a5351b12fadc073940a",
    "name": "Betty",
    "owner": {
      "_id": "614323ed282bfd3e68bbaf4f",
      "name": "Kirk Douglas",
      "email": "[email protected]",
      "__v": 0
    },
    "addressText": "Some cool street",
    "addressNumber": "91",
    "zipCode": "34567",
    "city": "Washington"
    "__v": 0
  },
  {
    "_id": "61715cf92bb6de6eca7e10f8",
    "name": "Jeremy",
    "owner": {
      "_id": "614323ed282bfd3e68bbaf4f",
      "name": "Paul Bettany",
      "email": "[email protected]",
      "__v": 0
    },
    "addressText": "Another street",
    "addressNumber": "233",
    "zipCode": "09234",
    "city": "New York",
    "__v": 0
  }
]

My code for the react component looks like this.


const BarrelDetails = () => {
  const { id } = useParams();
  const { data: barrel, error, isPending } = useFetch('localhost:8000/api/barrels/' + id);
  const history = useHistory();

  // const handleClick = () => {
  //   fetch('http://localhost:8000/api/barrels' + barrel.id, {
  //     method: 'DELETE'
  //   }).then(() => {
  //     history.push('/');
  //   })
  // }

  return (
    <div className="content">
      <div className="barrel-details">
        { isPending && <div>Loading...</div> }
        { error && <div>{ error }</div> }
        { barrel && (
          <div>
            <h2>{ barrel.title }</h2>
            <p>Ansprechpartner { barrel.owner }</p>
            <p>Standort: { barrel.city }</p>
            <Bookbarrel />
          </div>
        )}
      </div>
    </div>
  );
}

export default BarrelDetails;

It displays the barrel.owner id, but nothing else.

I also have the problem that i cannot access the data from my main List anymore...

I was using a useEffect hook, and passing data down to a list, but this did not work anymore.

useEffect(() => {
    fetch('https://devsauna.de/api/barrels/')
    // fetch('http://localhost:8000/api/barrels')
          .then(res => {
            if (!res.ok) {
              throw Error('Could not fetch the data for that resource');
            }
            return res.json();
          })
          .then(data => {
            setBarrels(data);
            setError(null);
            setIsPending(false);
          })
          .catch(err => {
            setIsPending(false);
            setError(err.message);
          });
    }, []);

I get the Error Error: Objects are not valid as a React child (found: object with keys {_id, name, email, __v}). If you meant to render a collection of children, use an array instead.

Someone Special · Accepted Answer · 2021-10-21 14:39:04Z

1

Your data is an array of objects, so you need to map it.

barrel && barrel.map(item => {
          return <div>
            <h2>{ item.title }</h2>
            <p>Ansprechpartner { item.owner }</p>
            <p>Standort: { item.city }</p>
            <Bookbarrel />
          </div>

})

edited Oct 21, 2021 at 14:39

answered Oct 21, 2021 at 14:29

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

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

3 Comments

AttemptedMastery Over a year ago

And remember, you'll have to return the HTML inside the block or you'll get an error as well.

Someone Special Over a year ago

thanks for reminder

bigfatbird Over a year ago

Ah ok. I didn’t notice this, because there are no [ ] in the JSON…

Collectives™ on Stack Overflow

Access Data in nested JSON API Object in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related