Angular ngresource and different promises

Question

I'm working on a twitch app. I know it could have easily been done with $http but I decided to try it with ngresource. The problem I'm having is with the offline tab. The users are showing but not the logo or username. I know it's because the stream promises return null for users who are offline so I cannot retrieve the logo/username. Is there anyway that I can somehow filter my $scope.all array and put the offline users under the offline tab? Any help would be greatly appreciated!

http://codepen.io/labanch/pen/OXdKmK?editors=1011

  .controller('TwitchController', ['$scope','$q', 'TwitchAPIChannel', function($scope, $q, TwitchAPIChannel) {  

    var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];  
    //var offlineUsers = [];

    // Create promise for each channel/stream and store both in an empty object
    var channelPromises= users.reduce(function(map, user) {
        map[user] = TwitchAPIChannel.Channels.get({channel: user}).$promise;
        return map;
    }, Object.create(null));

    var streamPromises = users.reduce(function(map, user) {
        map[user] = TwitchAPIChannel.Streams.get({channel: user}).$promise;
        return map;
    }, Object.create(null));



    // Calling promises for each channel/stream
    $q.all(channelPromises).then(function(channels) {
        $scope.allUsers = [];
       //pushing all channels to the allUsers array
        angular.forEach(channels, function(channel) {   
          $scope.allUsers.push(channel);
        });
    });

    $q.all(streamPromises).then(function(streams) {
       $scope.onlineUsers = [];
       var offlineUsers = [];
       $scope.offlineUsers = [];
       angular.forEach(streams, function(stream) {
         if(stream.stream){
           $scope.onlineUsers.push(stream);
         } else {
           $scope.offlineUsers.push(stream);
         }
       });
    });

  //tabs
  this.tab = 1;
  this.setTab = function (tabId) {
      this.tab = tabId;
  };
  this.isSet = function (tabId) {
      return this.tab === tabId;
  };

  }])

 // Twitch API Factory using $resource
 .factory('TwitchAPIChannel', function TwitchAPIFactory($resource){
  return {
    Channels: $resource('https://api.twitch.tv/kraken/channels/:channel', {}, {
      get: {
          method: 'GET',
          headers: {
              Accept: 'application/vnd.twitchtv.v3+json',
              'Client-ID': 'haibznywychj91wl2j76x1v1mx1rgwf'
          }
      }
    }),
    Streams: $resource('https://api.twitch.tv/kraken/streams/:channel', {}, {
      get: {
          method: 'GET',
          headers: {
              Accept: 'application/vnd.twitchtv.v3+json',
              'Client-ID': 'haibznywychj91wl2j76x1v1mx1rgwf'
          }
      }
    })
  };
})

Whatever the problem is, it has nothing to do with the code in your question. — Phil, Oct 28 '16 at 00:20
@Phil I reworded and added more of the code I'm having trouble with. — labanch, Nov 16 '16 at 23:27

score 1 · Answer 1 · answered Oct 28 '16 at 00:20

1

Your ng-click on your Offline tab was wrong. change it from this:

ng-click="tab = tab==2 ? a : 1"

to this:

ng-click="tab = tab==3 ? a : 3"

See here: http://codepen.io/anon/pen/KgLmjJ?editors=0001

answered Oct 28 '16 at 00:20

William B

1,411
8
10

Thank you @William. That fixed it but I still can't see the offline user name or logo. Not sure how to fix that part. – labanch Nov 16 '16 at 23:16

Angular ngresource and different promises

1 Answers1