TwitchTV project (JSON calls asyncronous)

Code Feedback
1

I’ve just finished the TwitchTV challenge. I found it very difficult. I have been able of finishing with help from internet.

The main difficulty has been to make work a $.getJSON method nested within another one.
As the call to the JSON object with .getJSON method is asyncronous the nested call doesn’t return anything.

I found the way with help, putting all the code within a function and setting a counter equal to the lenght of the users array, decrementing in one for each of the responses to the nested JSON calls; so only when all the responses are received is when the function makes something with the html in response to the call of the function.

I would still need some more enlightenment about JSON asyncronous and I would like to know if there are other ways more simple (e.g $.ajax method with the async property, but the documentation says ‘Cross-domain requests and dataType: “jsonp” requests do not support synchronous operations’).

Twitchtv JSON API

2

Hey @cortazar11 I think people are doing the JSONP the way they are is to make the website more responsive. It can start to populate the page as soon as the first Async response is received back without waiting for everything to be returned.

The reason the second JSONP call is nested inside the first is to fetch the Twitch TV channel image only after the main channel information is returned. Notice how the second $.getJSON() is nested in the first calls .done section. This insures things happen in the correct order.

It took me a long while to make it all work, and I guess that was part of the point of the challenge.

3

Hi !

I’ve been struggling with this as well, and I think a better way is to use promises instead of nesting getJSON requests.

Check the then and when keywords for possible implementations.

I hope this helps.

JP

2 Likes
4

Hey @jpdrecourt I agree with you, but I think a lot of us are using ES5. With ES6 we would have to run something along the lines of Babel. I haven’t got that far along in my studies. But perhaps I should start using ES6 sooner then later…

1 Like
5

If you’re on Codepen in Chrome, it should work without any extra compiler (that’s how I did it), but I see your point :slight_smile:

6

Hi JP/Rick,

I am starting to learn ES6 right now using Babel and with a bit of Lebab help. I have been having a lot of trouble with the Twitch Viewer as well. All the info I am learning here makes me realize that perhaps I should not be using $.getJSON, because I was initially only able to access the users that were online. Then I got offline users, but any account that was deactivated or didn’t exist came back undefined. The thing is that all the native text editor algorithms etc only take ES5, which makes starting to use ES6 for this one project a bit strange. However, since I do want to progress with my ES6 education, maybe I will give it a shot. After all, I have to get started on ES6 somehow!

Best regards,

Maria

1 Like
7

Hey @interglobalmedia Maria, there are some editors that have built in support for ES6, but except for the one I use I’m not sure what the other ones may be, perhaps someone can add to the list.

I’m using WebStorm and it does ES6 code highlighting, code completion etc. right out of the box. I’m sure that there are others.

1 Like
8

In Visual Code Studio you can specify with which version you work and the linters take that in account. I assume it’s the same for Atom

1 Like
9

Hi Rick,

I was going to get WebStorm a little while ago, and then got sidetracked. I use PHPStorm for WordPress Development, so I love JetBrains products. I guess I will just have to make sure I get it up and running this weekend! Thanks for letting me know about it!

BTW, you can use ES6 in Sublime Text 3 as well. I do, and have had no problems with it so far.

Best regards,

Maria

10

For this I used angular, they have a great FREE tutorial on their main website.

First I initialised each stream in an object as offline, then used a for loop on an array of channel names to $http.GET each stream from the api. If they were online I updated each stream object with the relevant details.

See how I got it to work here twirch.tv app

11

I did it the counter way. I don’t think it’s so bad.

If I did it again I might try a render function at the end of the callback that goes through my list of streams and adds them to my page if they’re not there already. That should dynamically update the page when data is received I think.

12

I’m kinda stuck on this project too. It looks like the last console.log is returning an empty array and executing before the loop while the console.log nested in the for loop and getJSON is returning values. Reading How do I return the response from an asynchronous call? but not sure how to do the callback or promises with my code

function channel() {
var channels = [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”];
var channelData = ;

for(var x = 0; x < channels.length; x++) {
    $.getJSON(`https://api.twitch.tv/kraken/channels/${channels[x]}?callback=?`, function(data) {
      console.log(data.display_name);
    //   console.log(data);
      channelData.push( { display_name:data.display_name, logo:data.logo, url:data.url, game:data.game, status:data.status } );
      console.log(channelData);
    });
}
console.log(channelData);

}

13

I don’t know if you still need help on this, but it may be useful for others.
I thinkl you need to wrap your console.log into an anonymous function for it to work:

$.getJSON(yourUrl, function(data){console.log(data.display_name);});

FYI I haven’t tried the code.

14

I ended up using .forEach method instead of the for loop to get around the async request getting processed out of order.

Thanks.