Twitch Stream API Project Error

Hello There,

This is related to the Twitch Project that is included in the Legacy FrontEnd Certification.

There, I’m successfully able to extract the details from the API regarding the channels,
but the issue comes when the data needs to be displayed from the global object, to render on to the HTML.

All of the channel details extracted are displayed as undefined but not the Stream details. However, all of the details related to channels and streams are displayed in the console.

checkout the pen:- https://codepen.io/piyusharora91/pen/jOzoewJ

Inside your setStreamData function, you call fetchData which returns a Promise and then within the then callback, you assign some values to CHANNEL_DETAILS and call setChannelData. setChannelData makes a call to fetchData which returns a Promise and then assigns some more info to CHANNEL_DETAILS. The problem is, since fetchData is asynchronous, it does not wait until all the data comes back before call displayData immediately after your call to setChannelData. This is why you are getting undefined values for those channel properties.