i working on updating list shows twitch information users. should show logo a, name, , if online. currently, grabbing channels , putting them 3 arrays. 1 array twitch channel information contains information on channels. 1 array holds display_name of online users. 1 array holds display_name of offline users.
it works, works if press beginning button. why button necessary , how make list populate without button?
http://codepen.io/crosscris/pen/zgeoor?editors=101
var app = angular.module('fcctwitchchecker', []); app.controller('fcctwitchcontroller', function() { var twitchcheck = this; var fccstreamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","notmichaelmcdonald","robotcaleb", "medrybw","comster404","brunofin","thomasballinger","joe_at_underflow","noobs2ninjas","mdwasp","beohoff","xenocomagain"]; twitchcheck.alluserschannelobjects = []; twitchcheck.offlineusers = []; twitchcheck.onlineusers = []; var beginningurl= "https://api.twitch.tv/kraken/"; fccstreamers.foreach(function(streamer){ var streamurlstring = beginningurl + "streams/" + streamer + "?client_id=1234chrisclientid4321&callback=?"; var channelurlstring = beginningurl +"channels/" + streamer + "?client_id=1234chrisclientid4321&callback=?"; $.ajax({ type: "get", datatype: "json", url: streamurlstring, success: function(result) { if(result.stream === null || result.error==="not found") { twitchcheck.offlineusers.push(streamer); } else { twitchcheck.onlineusers.push(streamer); } }, error: function() { console.log("it failed"); } }); $.ajax({ type: "get", datatype: "json", url: channelurlstring, success: function(result) { if (result.error !== "not found") { twitchcheck.alluserschannelobjects.push(result); if (result.logo === null) { twitchcheck.alluserschannelobjects[twitchcheck.alluserschannelobjects.length - 1].logo === "http://placehold.it/350x150"; } } }, error: function() { console.log("it failed"); } }); }); twitchcheck.showarray = function () { console.log(twitchcheck.alluserschannelobjects); } twitchcheck.onoroff = function(channelname) { if(twitchcheck.onlineusers.indexof(channelname.name) !== -1) { return "on"; } else { return "off"; } } });
i given list of display_names , of display names not valid channels. believe ajax/angular stuck trying find information of invalid channels, not sure.
since jquery http call outside of angular digest cycle (it asynchronous call), need manually run digest cycle using $scope.$apply()
controller in success
callback.
see example here: http://codepen.io/anon/pen/oxgqgm
however, suggested mcranston18 on comment, better use angular's $http
service rather jquery, takes care of scope digestion , don't need yourself.