TwitchTV project - AJAX call inconsistencies

1

Hello campers,

I’m working on the Twitch TV project to display the streams of a set of users. Everything seems to be working well but I’m having a problem with the data returned from the call being undefined when called from inside document.ready. My codepen of the project is linked at the bottom.

Inside my document.ready function I call loadUserData() which makes the AJAX calls. Intermittently, but fairly regularly, the streams for the users come back as undefined but only when called from inside document.ready. I have added a button labelled “twitch” which calls the same function and it never returns an undefined result for the stream details.

I’m using jQuery deferreds to process the data after the AJAX call finishes so there shouldn’t be a synchronicity issue.

I read online that maybe jQuery was being loaded after my own scripts which reference it but when I view my project in debug view, I can see that jquery is being loaded before my scripts. I also added a special function inside document.ready that makes a jquery call on another element just to try to force it to load before my code. Same problem.

Any help would be appreciated. Thanks!

-steve

2

I looked at jQuery documentation (jQuery.ajax() | jQuery API Documentation), and look what I found:

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: “jsonp” requests do not support synchronous operation.

Move your second call (getChannelData(i)) at the end of getStreamData() callback.

3 Likes
3

Thank you. I knew about that but I had forgotten, through all of my rewrites of this project, that the second function depended on data returned from the first. I thought I had made them independent. Making that change made it work consistently.

Thanks!