CODEWITHSUNDEEP
reactjsjson
bigfatbird
bigfatbird

Reputation: 25

Access Data in nested JSON API Object in react

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.

Upvotes: 0

Views: 881

Answers (1)

Someone Special
Someone Special

Reputation: 13598

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>

})

Upvotes: 1

Related Questions