javascript - Twitch TV JSON API Issue -

so,i trying use twitch api: https://codepen.io/sterg/pen/yjmzrn
if check codepen page you'll see each time refresh page status order changes , can't figure out why happening. here javascript:

$(document).ready(function(){     var ur="";     var tw=["freecodecamp","nightblue3","imaqtpie","bunnyfufuu","mushisgosu","tsm_dyrus","esl_sc2"];     var j=0;     for(var i=0;i<tw.length;i++){            ur="https://api.twitch.tv/kraken/streams/"+tw[i];          $.getjson(ur,function(json) {              $(".tst").append(json.stringify(json));             $(".name").append("<li> <a href="+"https://www.twitch.tv/"+tw[j]+">"+tw[j]+"</a><p>"+""+"</p></li>");              if(json.stream==null){                 $(".stat").append("<li>"+"offline"+"</li>");              }             else{                 $(".stat").append("<li>"+json.stream.game+"</li>");               }             j++;     })      }   }); 

$.getjson() works asynchronously. json won't returned until results come back. api can return in different orders requests made, have handle this.

one way use promise api, along $.when() bundle requests 1 big promise, succeed or fail 1 whole block. ensures response data returned code in expected order.

try this:

var channelids = ['freecodecamp', 'nightblue3', 'imaqtpie', 'bunnyfufuu', 'mushisgosu', 'tsm_dyrus', 'esl_sc2']; $(function () {   $.when.apply(     $,      $.map(channelids, function (channelid) {       return $.getjson(         'https://api.twitch.tv/kraken/streams/' + encodeuricomponent(channelid)       ).then(function (res) {         return {           channelid: channelid,           stream: res.stream         }       });     })   ).then(function () {     console.log(arguments);     var $playersbody = $('table.players tbody');     $.each(arguments, function (index, data) {       $playersbody.append(         $('<tr>').append([           $('<td>'),           $('<td>').append(             $('<a>')               .text(data.channelid)               .attr('href', 'https://www.twitch.tv/' + encodeuricomponent(data.channelid))           ),           $('<td>').text(data.stream ? data.stream.game : 'offline')         ])       )     })   }) }); 

https://codepen.io/anon/pen/kroxwo

here, i'm using $.when.apply() use $.when array, rather list of parameters. next, i'm using $.map() convert array of channel ids array of promises each id. after that, have simple helper function handles normal response (res), pulls out relevant stream data, while attaching channelid use later on. (without this, have go original array id. can this, in opinion, isn't best practice. i'd prefer keep data response later refactoring less break something. matter of preference.)

next, have .then() handler takes of data , loops through them. data returned arguments function, use $.each() iterate on each argument rather having name them out.

i made changes in how i'm handling html well. you'll note i'm using $.text() , $.attr() set dynamic values. ensures html valid (as you're not using html dynamic bit @ all). otherwise, might have username of <script src="somethingevil.js"></script> , it'd run on page. avoids problem entirely.