Cant access object properties retrieved via API with error message TypeError: Cannot read property '' of undefined - Nextjs/JavaScript

Question

I have a problem that appears to be unique to NextJs.

I am hitting an API through a useHook and retrieving the results. What I get back is an array of objects. Everything works fine and I can console.log the entire result (Array of objects).

  const mymoviegenreobjects = useFetchNavBarCatagories();

[{ "id": "1", "name": "Adventure", }, { "id": 2, "name": "Horror" }, { "id": 3, "name": "Action" }]

Then I filter the array of objects so that I can find which object has a name key that is = to 'Adventure'. That also works fine and I am able to extract the object which has the name key = to "Adventure" and now what I get back is an array with one object inside (the correct one).

 const avengers = mymoviegenreobjects.filter(
    (character) => character.name === "Adventure"
  );

[{ "id": "1", "name": "Adventure", }]

Then to access the correct element of the array I use the [0] method which allows me to console.log just the first object. However when I want to console.log the first object.id which I do like thi

   console.log("The ID for Avengers is", avengers[0].id)

I get this error.

Server Error TypeError: Cannot read property 'id' of undefined

I am not sure why this is happening as this is the correct way to access the element in an array of objects, then a particular element within the selected object.

I have read some very vague explanation [link below] but I was unable to make out why this was actually happening and how to solve it. Furthermore, I've also read elsewhere that process.window is a deprecated function and should not be used.

So my question is how would I access the ID property of my object so that I would be able to console.log it and/or store it in a different variable.

Any help would be great. Thanks.

Next.js TypeError: Cannot read property '' of undefined when trying to console log api results

I have added a code sandbox to help you understand my error and what I am trying to do. Please disregard all my commented out stuff as I am just playing around and trying to do different stuff. Link is below.

https://codesandbox.io/s/modest-neumann-2x6iff

What I am trying to do is access the individual properties of the last console.log (This is avangers two)

The code for the log can be found in the usefetchMovieGenreResults hook.

I also tried to implement painting the object on the screen on the MovieGenreResults component just to see what happens but it does not work (as expected). I used the hook above to feed it. Ideally I would use the . notion to access the specific element I want to paint however it gives me an error.

It's because the variable mymoviegenreobjects is undefined when the page gets pre-rendered on server, as the data fetching happens inside useEffect on the client-side only. You have to check if mymoviegenreobjects in undefined before trying to access/manipulate its contents. — juliomalves
– juliomalves, Commented Aug 1, 2022 at 21:11
@juliomalves Then why is it that I can I map my mymoviegenreobject using line 22 and 26 in my useFetchMoviegenreresults hook? Or why does console.log("This is avangers two", avengerstwo) which is line 72 return the object I want on the browser console? I am looking to take that returned object and access its properties so I can store them in different variables. Furthermore, how would I implement your suggestion? Would I put the check for mymoviegenreobjects in an 'If' statement? Something like If mymoviegenreobjects !== null?. Feel free to reply with the bit of code you think needs editing. — Justcoding
– Justcoding, Commented Aug 2, 2022 at 6:26
You can see the expected output for avengerstwo in the browser because, as I mentioned, the data is fetched only on the client. If you check your logs on the server (terminal where you started the dev server) you'll see that value is undefined. The issue happens when pre-rendedering the page on the server, not in the browser. Having a condition like if (mymoviegenreobjects.genres.length > 0) { ... } should work fine. Also, small correction from my previous comment, mymoviegenreobjects is not undefined on the server, it's mymoviegenreobjects.genres that's an empty array. — juliomalves
– juliomalves, Commented Aug 2, 2022 at 7:58

Aman · Accepted Answer · 2022-07-31 05:57:28Z

0

can you make a codesandbox? It seems you're using next.js, calling the api on the server but logging the result in the jsx, you need to receive props to the component to achieve that next.js server side data fetching

answered Jul 31, 2022 at 5:57

Aman

811 silver badge4 bronze badges

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

2 Comments

Justcoding Over a year ago

Added a code Sandbox @Aman

Aman Over a year ago

I've looked into the code, it's hard to understand but i guess the problem is this, const results = useFetchMovieGenreResults(Genre); Here results is undefined you might want to use optional chaining. <Moviegenreresults genre={Genre} id={results?.id} /> Further, you need to set the array coming from server into some state, otherwise the page wont re-render. In your custom hook, fetch the data and setState(data), and return this state not data. then access data[query.id]

Collectives™ on Stack Overflow

Cant access object properties retrieved via API with error message TypeError: Cannot read property '' of undefined - Nextjs/JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related