Currently, I am developing a Twitch app and instead of using $http, I opted for ngresource to explore new possibilities. However, I encountered an issue with the offline tab where the users are visible but their logo or username is not displayed. This happens because the stream promises return null for offline users, making it impossible to retrieve the logo/username. I am seeking help on how to filter my $scope.all array and group the offline users under the offline tab. Any assistance would be highly 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'
}
}
})
};
})