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.

Answer 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>
})

• AttemptedMastery: And remember, you'll have to return the HTML inside the block or you'll get an error as well.
• Someone Special: thanks for reminder
• bigfatbird: Ah ok. I didn’t notice this, because there are no [ ] in the JSON...