AngularJS $resource — добавление элемента массива в paramDefaults

Я использую API twitch.tv и фабрику ресурсов Angular $. Конечная точка, которую я пытаюсь использовать: GET /channels/:channel. Я пытаюсь получить канал для каждого элемента массива. Я пробовал /channels/users[1], но знаю, что это неправильно. Как я могу получить: канал для всех пользователей в массиве? Или есть лучший способ сделать это?

    (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" });
   });
})();

javascript angularjs twitch jsonp angular-resource
person labanch    schedule 14.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, вам не нужно использовать JSONP, поскольку Twitch API поддерживает запросы CORS, вы можете настроить свой $resource следующим образом.

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

Если вы действительно хотите использовать JSONP, вы не можете отправлять информацию заголовка в запросе, поэтому он должен выглядеть так:

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

Не похоже, что есть способ получить более одного канала одновременно (ссылка: https://github.com/justintv/Twitch-API/blob/master/v3_resources/channels.md), но вы должны иметь возможность делать это параллельно

Вы можете создать простой массив обещаний, подобных этому

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

Затем вы можете дождаться разрешения всех промисов, используя $q.all.

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

Только не забудьте внедрить сервис $q.

person Phil    schedule 14.09.2016
comment
Спасибо! Я все еще изучаю Angular, поэтому попробую ваше решение. - person labanch; 14.09.2016
comment
Как я могу получить данные из API? Будет ли это что-то вроде: user.url? @Фил - person labanch; 15.09.2016
comment
@labanch извините, я не понимаю вопроса. Ответ на каждый запрос должен быть доступен в переменной channel, используемой в цикле angular.forEach. Это должно выглядеть так ~ github.com/ justintv/Twitch-API/blob/master/v3_resources/ - person Phil; 15.09.2016
comment
Извините, я не очень ясно выразился в своем вопросе. если я хочу получить доступ к свойству логотипа ответа, как мне это сделать? Когда я использовал $http.jsonp, я могу выполнить функцию обратного вызова успеха для данных, а затем получить доступ к свойствам, выполнив data.propertyname следующим образом: - person labanch; 15.09.2016
comment
пожалуйста, взгляните на предыдущий комментарий. Я использовал $http.jsonp и использовал функцию обратного вызова для доступа к данным. Например, .success(function(data)){ $scope.example = data.logo; } Как я могу получить доступ к свойствам данных с помощью вашего решения? Channel.propertyname? Еще раз спасибо за помощь! @Фил - person labanch; 15.09.2016
comment
пожалуйста, смотрите мой codepen. Я не уверен, почему это не работает. Прокомментированный код с использованием $http работает, но не решение, которое вы дали (я хотел бы узнать $resource, поэтому я бы предпочел использовать ваше решение). Пожалуйста, сообщите, поскольку я не вижу ничего плохого в предложенном вами решении. codepen.io/labanch/pen/LRNVYA?editors=1011 Спасибо. - person labanch; 19.09.2016
comment
@labanch ах, я облажался. Вы не можете устанавливать заголовки запросов для запросов JSONP поэтому версия и идентификатор клиента должны указываться в параметрах запроса. Однако Twitch API поддерживает запросы CORS, поэтому вам не нужно использовать JSONP. Смотрите мой обновленный ответ - person Phil; 19.09.2016