Pfthb

I am doing the following exercise on Next.js remote fetching. What I am not able to understand and adapt is the exercise fetches data from http://api.tvmaze.com.

Data is like:

[
"score":24,"show":"id":975,"url":"", "name":""
,"score":25,"show":"id":976,"url":"", "name":""
,"score":26,"show":"id":977,"url":"", "name":""
]


The index page uses the following mapping:

props.shows.map((show) => (
<li key=show.id>
<Link as='/p/$show.id' href='/post?id=$show.id'>
<a>show.name</a>
</Link>
</li>
))


Note, it has "score":"", "show": structure. So, the props.shows.map uses a variable show and refers to show.id and show.name. And it works fine. I am confused to understand how does it work? Because id is nestled inside and to me it should be show.show.id.

Also, I am trying to fetch a different source of data that has slightly different structure.

[
"id": 1, "name":"name1"
,"id": 2, "name":"name2"
,"id": 3, "name":"name3"
]


The same code fails with error:

Unhandled Rejection (TypeError): Cannot read property 'id' of undefined


So, apart from it has obviously different data structure. I could not understand why, if my data structure is slightly different, how do I change the props.shows.map function change accordingly?

Are you familiar with object destructuring in JS? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

In the example, writing (show) is shorthand for writing something like (resp) and then later show = resp.show. So in this case, due to destructuring, show already is the show object. Therefore, id works.

Your data doesn't have a show property, so when destructuring, show is undefined. And, of course, you can't get a property of undefined. Removing the curly braces from show should do the trick.