AngularJS $resource - adding array element to paramDefaults

Question

I'm using the twitch.tv api and using the Angular $resource factory. The endpoint I'm trying to use is: GET /channels/:channel. What I'm trying to do is get the channel for each array element. I tried /channels/users[1] but I know this is wrong. How can I get the :channel for all the users in the array? Or is there a better way to do this?

    (function() {
       angular.module('twitch', ['ngResource'])

       .controller('TwitchController', ['$scope', 'TwitchAPI', function($scope, TwitchAPI) {   
         $scope.getAPI = function(){
           var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];  
           for(var i = 0; i < 8; i++){
           TwitchAPI.get({channel: users.i});
         }
       }
       $scope.online = [];
       $scope.offline = [];


  }])

  .factory('TwitchAPI', function TwitchAPIFactory($resource){
     return $resource('https://api.twitch.tv/kraken/channels/:channel', { callback: "JSON_CALLBACK" });
   });
})();

Phil · Accepted Answer · 2016-09-18T23:46:10.997

0

First, you don't need to use JSONP as the Twitch API supports CORS requests, you can configure your $resource like so

return $resource('https://api.twitch.tv/kraken/channels/:channel', {}, {
    get: {
        method: 'GET',
        headers: {
            Accept: 'application/vnd.twitchtv.v3+json',
            'Client-ID': 'Your client ID'
        }
    }
})

If you really want to use JSONP, you can't send header information in the request so it would have to look like

return $resource('https://api.twitch.tv/kraken/channels/:channel', {
    callback: 'JSON_CALLBACK',
    api_version: 3,
    client_id: 'your client ID'
}, {
    get: {
        method: 'JSONP'
    }
})

Doesn't look like there's a way to get more than one channel at a time (ref: https://github.com/justintv/Twitch-API/blob/master/v3_resources/channels.md) but you should be able to do so in parallel

You can create a simple array of promises like this

var promises = users.map(user => TwitchAPI.get({channel: user}).$promise);

You can then wait for all the promises to resolve using $q.all

$q.all(promises).then(channels => {
    angular.forEach(channels, channel => {
        // access each channel's properties here
        console.log('Channel name:', channel.display_name);
    });
});

Just don't forget to inject the $q service.

edited Sep 18 '16 at 23:46

answered Sep 14 '16 at 03:21

Phil

157,677
23
242
245

Thanks! I'm still learning Angular so I'll give your solution a try. – labanch Sep 14 '16 at 12:12
How do I actually get the data from the api? Would it be something like: user.url? @Phil – labanch Sep 14 '16 at 22:38
@labanch sorry, I don't understand the question. The response from each request should be available in the `channel` variable used in the `angular.forEach` loop. It should look like this ~ https://github.com/justintv/Twitch-API/blob/master/v3_resources/channels.md#get-channelschannel – Phil Sep 14 '16 at 23:47
Sorry I wasn't very clear on my question. if I want to access the "logo" property of the response how would I do that? When I've used $http.jsonp I can do a success callback function for the data and then access the properties by doing "data.propertyname" like so: – labanch Sep 15 '16 at 12:42
please take a look at the previous comment. I've used $http.jsonp and I've used the success callback function to access the data. For example, .success(function(data)){ $scope.example = data.logo; } How would I access the property of the data with your solution? Channel.propertyname? Thanks again for your help! @Phil – labanch Sep 15 '16 at 12:55
please see my codepen. I'm not sure why it's not working. The commented code using $http works but not the solution you gave (I'd like to learn $resource which is why I would rather use your solution). Please advise as I see nothing wrong with the solution you provided. http://codepen.io/labanch/pen/LRNVYA?editors=1011 Thanks – labanch Sep 18 '16 at 22:11
@labanch ah, I messed up. [You can't set request headers for JSONP requests](http://stackoverflow.com/questions/19603757/how-to-change-the-headers-for-angularjs-http-jsonp) so the version and client ID need to go in the query parameters. The Twitch API supports CORS requests though so you don't need to use JSONP. See my updated answer – Phil Sep 18 '16 at 23:47

AngularJS $resource - adding array element to paramDefaults

1 Answers1