javascript - Call function after ajax calls have finished -


this question has answer here:

i'm trying use twitch.tv's api information channels. have different channels im trying information in array iterate through forloop , within loop make $.ajax() each 1 of these channels. after information want these channels store them in object push onto different arrays depending on wether or not channel streaming or offline. issue seems when call display method , change divs html information channels, of requests have not completed yet , reason dont channels added onto page. question should call display function in code , if there better approach im trying achieve. in advance here code. https://jsfiddle.net/bwsvxsdv/4/

<!doctype html> <html>     <head>         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>     </head> <body>     <div class="well">         <h1>twitch.tv api</h1>      </div>      <div class="row">         <div class="col-sm-3 text-center">             name         </div>          <div class="col-sm-9 text-center">             status         </div>     </div>      <div class="channelcontainer">      </div>     <script>         $streamers = ["esl_sc2", "ogamingsc2", "cretetion", "freecodecamp",         "storbeck", "habathcx", "robotcaleb",         "noobs2ninjas", "brunofin", "comster404","zxcxxxxzzxxxxc"];          $onlinechannels = [];         $offlinechannels = [];         $closedchannels = [];         $nonexistantchannels = [];          function getstreaminfo(callback){             for($i=0;$i<$streamers.length;$i++){                 $.ajax({                     name:$streamers[$i],                     length:$streamers.length-1,                     index:$i,                     func: callback,                     url:'https://api.twitch.tv/kraken/streams/'+$streamers[$i],                     datatype:'json',                     success: function(data){                          if(data.stream != null){//if there stream information                             //add online channels                             //console.log("its streaming channel");                             $chaninfo = {"name":this.name,"game":data.stream.game,"status":data.stream.channel.status};                             $onlinechannels.push($chaninfo);                         }else{                             //add offlinechannels                             //console.log("currently not streaming");                             $chaninfo = {"name":this.name,"status":"offline"};                             $offlinechannels.push($chaninfo);                         }                        },                     error: function(data){                         if(data.status === 422){                             //console.log('add closedchannels');                             $chaninfo = {"name":this.name,"status":"account closed"};                             $closedchannels.push($chaninfo);                         }                          if(data.status === 404){                             //console.log('add nonexistantchannels');                             $chaninfo = {"name":this.name,"status":"non existant channel"};                             $nonexistantchannels.push($chaninfo);                         }                     },//end of error                                             complete: function(){                         if(this.index === this.length){                             callback();                         }                     }                 });//end of ajax request              }//end of loop         }//end of function          function displaychannels(){         console.log('doing displaychannels function');         $chans = [$onlinechannels,$offlinechannels,$closedchannels];          $html = "";         for($i =0;$i<$onlinechannels.length;$i++){             console.log("making html");             $html+= '<div class="row"><div class="col-sm-3 text-center">'+$onlinechannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$onlinechannels[$i]["status"]+'</div></div>'          }         for($i =0;$i<$offlinechannels.length;$i++){             console.log("making html");             $html+= '<div class="row"><div class="col-sm-3 text-center">'+$offlinechannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$offlinechannels[$i]["status"]+'</div></div>'          }         for($i =0;$i<$closedchannels.length;$i++){             console.log("making html");             $html+= '<div class="row"><div class="col-sm-3 text-center">'+$closedchannels[$i]["name"]+'</div><div class="col-sm-9 text-center">'+$closedchannels[$i]["status"]+'</div></div>'          }         console.log($html);         console.log("about add html");         $(".channelcontainer").html($html);         console.log("html added");         }          getstreaminfo(displaychannels);     </script> </body>

you can use deferred array , call callback when deferred objects have been resolved.

$streamers = ["esl_sc2", "ogamingsc2", "cretetion", "freecodecamp",    "storbeck", "habathcx", "robotcaleb",    "noobs2ninjas", "brunofin", "comster404", "zxcxxxxzzxxxxc"  ];    $onlinechannels = [];  $offlinechannels = [];  $closedchannels = [];  $nonexistantchannels = [];    function getstreaminfo() {      var deferred = [];   // deferred array.      ($i = 0; $i < $streamers.length; $i++) {        deferred.push(          $.ajax({            name: $streamers[$i],            length: $streamers.length - 1,            index: $i,              url: 'https://api.twitch.tv/kraken/streams/' + $streamers[$i],            datatype: 'json',            success: function(data) {                if (data.stream != null) { //if there stream information                //add online channels                //console.log("its streaming channel");                $chaninfo = {                  "name": this.name,                  "game": data.stream.game,                  "status": data.stream.channel.status                };                $onlinechannels.push($chaninfo);              } else {                //add offlinechannels                //console.log("currently not streaming");                $chaninfo = {                  "name": this.name,                  "status": "offline"                };                $offlinechannels.push($chaninfo);              }                  },            error: function(data) {                if (data.status === 422) {                  //console.log('add closedchannels');                  $chaninfo = {                    "name": this.name,                    "status": "account closed"                  };                  $closedchannels.push($chaninfo);                }                  if (data.status === 404) {                  //console.log('add nonexistantchannels');                  $chaninfo = {                    "name": this.name,                    "status": "non existant channel"                  };                  $nonexistantchannels.push($chaninfo);                }              } //end of error						            }) //end of ajax request        );                } //end of loop      return deferred; // return array    } //end of function    function displaychannels() {    console.log('doing displaychannels function');    $chans = [$onlinechannels, $offlinechannels, $closedchannels];      $html = "";    ($i = 0; $i < $onlinechannels.length; $i++) {      console.log("making html");      $html += '<div class="row"><div class="col-sm-3 text-center">' + $onlinechannels[$i]["name"] + '</div><div class="col-sm-9 text-center">' + $onlinechannels[$i]["status"] + '</div></div>'      }    ($i = 0; $i < $offlinechannels.length; $i++) {      console.log("making html");      $html += '<div class="row"><div class="col-sm-3 text-center">' + $offlinechannels[$i]["name"] + '</div><div class="col-sm-9 text-center">' + $offlinechannels[$i]["status"] + '</div></div>'      }    ($i = 0; $i < $closedchannels.length; $i++) {      console.log("making html");      $html += '<div class="row"><div class="col-sm-3 text-center">' + $closedchannels[$i]["name"] + '</div><div class="col-sm-9 text-center">' + $closedchannels[$i]["status"] + '</div></div>'      }    console.log($html);    console.log("about add html");    $(".channelcontainer").html($html);    console.log("html added");  }      var deferredarr = getstreaminfo();  // call callback once ajax calls done  $.when.apply(null, deferredarr).done(function() {    alert("all requests completed!. calling displaychannels");    displaychannels();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="well">    <h1>twitch.tv api</h1>    </div>    <div class="row">    <div class="col-sm-3 text-center">      name    </div>      <div class="col-sm-9 text-center">      status    </div>  </div>    <div class="channelcontainer">    </div>


-

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

background so i've been researching quite bit past week api's , have been reading concepts , programming one. currently have website programmed in php using popular framework called laravel. website has user database , users able log dashboard on website, works want website side. now next project of business i'm focusing on creating mobile applications (ios & andriod).what need these mobile applications being able login through application ui (not being redirected site callback url) able view , manage dashboard. the method of authentication , authorization want use application go like client asks user login through ui user enters credentials client sends request login api the api checks if credentials correct api creates token stored in token database linked user id api returns 200 ok json response or this { "token" : "ols25usjiay81hdy81", "expiry" : 3/06/2016 14:00} client remembers token , expiry whenever user/c
Read more

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Image
This guest post is by Phil (not his real name) of somehighschoolblog . It used to be impossible to run a business anonymously. Sure, some authors could pull it off, but if you worked at an office, what were you supposed to do? Go to work with a bag over your head? But today anyone can accomplish this, because anyone can author a blog (and you thought I was going to tell you to work with a mask on, or something). Copyright Ovidiu Iordachi - Fotolia.com Depending on your motives, you may or may not have considered blogging anonymously. You probably didn’t contemplate blogging anonymously if: • your only motivation is to become “famous” • your blog connects to another part of your life • you are blogging to build more connections with your friends or boss. You should consider blogging anonymously if: • you’re planning on touching on a sensitive or taboo subject • you don’t want to be identified with your blog • you are worried about negative real-world consequences that could arise from y
Read more

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo

Unless you have been living under a rock for the last year or so, you probably know that Google has become the king of the search engine hill. There are many reasons for this but number one in my opinion is that above all else they put value on content. Today I want to introduce you to two very powerful small business advertising options created by Google. These two ingenious programs have all but revolutionized the way advertising is done on the web. Warning: If you are thinking..."web advertising isn't for me, I just need a few more clients around the block"...you better read this or be prepared to have your competitors eat your lunch. Goolge AdSense - Again content is king at Google. This program allows web site "publishers" to add some code from Google and receive "content relevant" ads on their site from other site owners. Here is an example - those ads in the box on the right of the page are delivered by Google and are matched to the content
Read more