Determine if twitch stream is offline

I’m currently doing Twitch api project. My problem is how to determine which streams are offline AND get their names, logos, urls, which i can’t if i use “https://api.twitch.tv/kraken/streams/”+streamers[i] + “?client_id=” + clientId. I checked if stream is null, then i can determine if they are online or offline, but cannot get info for streamers who are currently offline .

If i use “https://api.twitch.tv/kraken/channels/”+streamers[i] + “?client_id=” + clientId , i get all necessary info, but now cannot determine which are offline or online …

Here’s a link to my pen: https://codepen.io/codename11/pen/PemrXN

I seem to remember backing two JSON calls for each user.

At same time? Considering nature of calls(asinc) how can something be achieved? I tried nesting one asinc call within another, but that doesn’t seem to work for some reason … Is that you meant when you said “backing”?

Sorry, I was tired when I was typing. I don’t know what I meant by backing. I meant either using or calling. I just made two separate calls.

In meantime, i tried using $.when().then(). Structure of it: $.when() encompass $.each(array as parameter) which encompass $.getJSON from which should get json. This only works if i ditch $.each and in $.getJSON and instead of “this” keyword i use string from previously said arrays … Long story-short, $.when().then() works on single string and now i need it to work with array of strings. This is link to forked code: https://codepen.io/codename11/pen/wjroLQ

There are different ways to handle this. I don’t see why you need $.when(), but that could work.

The big choice to me, is do we wait until all the data is back, store it in an array and then write it to the screen, or do we write it as it comes in. To me the second option is a better UX so they can see the data come in. If you set up your table ahead of time, you should just be able to write the data as it comes in.

Problem is that i need info from both of jsons since either of them doesn’t contain ALL info i need. As i said, i tried your second option first, but even if i declare arrays for both jsons as global variable, i cannot access them outside $.getJSON … Thus i need $.when().then() . If i do this, new problem occurs of how to incorporate $.each since i handle arrays of json requests and not single request.

Right, but using ids and classes you can target whatever grid cells you need. I’m telling you, you do not need to wait for all the data. If you want to that’s fine, but you don’t need to.

but even if i declare arrays for both jsons as global variable, i cannot access them outside $.getJSON

This is the difficulty/beauty of asynchronous coding. You can access them as global variables outside the AJAX call, but the problem is when you access them they probably aren’t defined yet. There are ways to handle them, but the easiest way is to put the code you need inside the callback or promise so it gets called after the AJAX call. And if you choose to wait until all the data is back, then you can chain them with nested callbacks or with then methods and put your output code in the second callback or then.

Thus i need $.when().then()

No, you don’t. You can do it that way, but you don’t need to. Again, nesting callbacks or chaining promises will do the same thing. I’m not saying your approach is bad, but that you seem to incorrectly think it is your only option.

If i do this, new problem occurs of how to incorporate $.each since i handle arrays of json requests and not single request.

Again, you can handle each request as it comes in. But you you want to create arrays of the data, you can do that too. Then you will presumably you will have two arrays. Inside your final then you can loop them and output them.

I did target them by id. I know how to do that. Problem is that i don’t have all info i need from just one json call, so i need them both. And i need them at same time, at the same place(id). Problem is how to call to jsons at parallel so i can target ids. I tried nesting callbacks, but inner callback cannot access outer callbacks data and i don’t know why and/or data is undefined …

Again, you keep telling me that you need to do it that way, and I keep telling you you don’t need to. Here is an example of writing to the DOM asynchronously. The mechanics of the function may be beyond your ken at the moment, but the idea is what matters - using jQuery to selectively target cells as the data is available.

Again, this is not the only way to do it, but it is a good way and I think is better for UX.

I tried nesting callbacks, but inner callback cannot access outer callbacks data and i don’t know why and/or data is undefined …

That is not true. An inner nested callback should have the outer callback in scope. A while back I wrote this pen to help people understand async behavior. It is an example of nested callbacks but it would work with promises too.

Thanks anyway. I found appropriate solution.

I hope you try to understand those concepts I was pushing. There are ways around those, but those are pretty fundamental concepts to JS and web dev.