angularjs - объединяет данные для вызовов цикла API

Question

У меня есть этот API, который имеет страницы 1-10, и я хочу циклически просмотреть номера страниц, чтобы сделать вызовы API

app.factory('companies', ['$http', function($http) {
    var i;
    for (i = 1; i < 11; i++) {
        var data = $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i);
        console.log('list', data);
    }
    return data;
}]);

Это то, что я получаю, когда консоль регистрирует данные для всех 10Вызовы API Данные JSON

Моя попытка отобразить все данные (список имен), но кажется, что он использует только последний APIпозвонить и показать его.Как объединить все возвращенные данные в один объект для отображения списка имен со страниц 1-10?

app.controller('HomeController', ['$scope', 'companies', function($scope, companies) {
    companies.success(function(data) {
        $scope.companies = data;
        console.log('companies', $scope.companies);
    });
}]);

view.html

<div class="container" ng-controller="HomeController">
        <div ng-repeat="company in companies" class="list">
            <a href="#/{{ company.id }}" class="company-name">{{ company.name }}</a>
        </div>
</div>

Answer 1

Каждый вызов службы $ http возвращает обещание.Вам необходимо использовать $q.all для консолидации обещаний:

app.factory('companies', function($http,$q) {
    return { tenPagesPromise: tenPagesPromise };

    function tenPagesPromise () {
        var indices = Array.from({length:10}).map((x,i)=>i);
        var promises = indices.map(i=>pagePromise(i));
        return $q.all(promises).then(responseArray => {
            var dataArray = responseArray.map(x=>x.data);
            return dataArray.reduce((t,x)=>t.concat(x),[]);
        });
    }

    function pagePromise(i) {
        var url = "https://examplepage.com/wp-json/wp/v2/categories";
        var params = { per_page: 50, page: i };
        var config = { params: params }
        promise = $http.get(url,config);
        return promise;
    }
});

Использование:

companies.tenPagesPromise.then(data => {
    $scope.companies = data;
}).catch(function(errorResponse) {
    console.log(errorResponse);
});

Для получения дополнительной информации см. AngularJS $ q Справочник по API сервиса - все .

Answer 2

Вам нужно разрешить обещание и затем добавить данные в массив, что-то вроде этого:

app.factory('companies', ['$http', function($http) {
    data = []
    for (let i = 1; i < 11; i++) {
        $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i)
          .then( function(resp) {
             console.log(resp.data);
             data.push(resp.data);
           })
    }
    return data;
}]);