Twitchtv JSON API

Twitchtv JSON API
0

#1

There are two video tutorial series that cover this. Mr Snow and Dylan Isreal (Tutorial 360) neither of them seem to get bogged down in the async issues I’m trying to sort out. I think I’ve usually had a framework taking care of this for me. So any advice would be greatly appreciated. I’ve forked Dylan’s right now and am successfully getting it to show how many streams are live… around 35k… usually.

I’m trying to figure out why I’m triggering both the success and error calls? I think if it does make it successful ajax call, it’d still interrupt the scope of i… ? I’m looking up .done next, because I noticed it’s in both video series, but it seems like it’d be the same as success or error. Mainly the fact that they don’t get bogged down in it makes me think I’m on the wrong track.

var streams = [
  "summit1g",
  "ESL_SC2",
  "cretetion",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas",
  "gamesdonequick",
  "OgamingSC2",
  "freecodecamp"
];
//jquery run
$(document).ready(function() {
  function twatch(i) {
    $.ajax({
      type: "GET",
      url: "https://api.twitch.tv/kraken/streams/" + i,
      headers: {
        "client-ID": "xxx"
      }, //end of header
      success: console.log("success", i),
      error: console.log("error", i)
    }); //end of ajax call
  } //end of twatch
  
  var funcs = [];

  for (let i = 0; i < streams.length; i += 1) {
  funcs[i] = twatch(streams[i]);
    console.log(i);
  }
  console.log(funcs);
}); //end of $(document).ready(function()
/*
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example/41023816#41023816
for (var i = 0; i < streams.length; i++) {
*/

https://codepen.io/TurtleWolf/pen/KqryPg

Started an earlier thread on sitepoint


#2

Try using a function instead of console.log directly, i.e.:

      success: function(result){ console.log("success %d", i) },
      error: function(result){ console.log("error: %d", i) }

#3

As @WolfEng pointed out your need to wrap the code you have on the success and error in a function for some reason i don’t know why but i’ve had issues with the same problem when not having a function when there should be one. and about the array being populated with undefined means you’re filling it with what the function Twatch return funcs[i] = twatch(streams[i]); but it returns nothing
what you want is the data that gets returned from the api call which will be the parameter of the function success. so one way to do it is make the funcs array public which you already did and call the push() method on it inside the success function and passing the success function parameter to that push method that should fill it. code below

var funcs = [];
function twatch(i) {
    $.ajax({
      type: "GET",
      url: "https://api.twitch.tv/kraken/streams/" + i,
      headers: {
        "client-ID": "xxx"
      }, //end of header
      success: function (obj){funcs.push(obj)},
      error: function (){console.log("error", i)}
    }); //end of ajax call
  } //end of twatch

  for (let i = 0; i < streams.length; i += 1) {
  	twatch(streams[i]);
  }
console.log(funcs);

Hope it helped :slight_smile:

Uh if anything isn’t clear, Please tell me. Sorry