AngularJS построить объект из трех различных вызовов API

Question

Я хочу создать панель управления jenkins с angularJS. Мне нужно или я хочу (не знаю, хороша ли идея) объединить данные, которые я получил от трех различных вызовов API, чтобы построить из него объект, чтобы использовать его в качестве ng-repeat в файле html.

Структура данных должна выглядеть следующим образом:

объект JSON

{
  "Job1": {
    "branchname1": {
      "stagename1": {
        "stage_status": "SUCCESS"
      },
      "stagename2": {
        "stage_status": "FAILED"
      }
    }
  },
  "Job2": {
    "branchname1": {
      "stagename1": {
        "stage_status": "SUCCESS"
      },
      "stagename2": {
        "stage_status": "FAILED"
      }
    }
  }
}

код AngularJS

angular.module('App')
  .controller('IndexCtrl', function($scope, $route, $routeParams, $rootScope, $http, $location, $log, $q, moment, $filter) {

    $scope.api = 'http://127.0.0.1:8080';
    $scope.customer = '';
    $scope.jobs = [];

    function getJobs(customer, callback) {
      $scope.customer = customer;
      $http.get($scope.api + '/job/' + customer + '/api/json?tree=jobs[name]').then(function(response) {
        angular.forEach(response.data.jobs, function(value, index) {
          $scope.jobs.push(value.name);
        });
        callback(response);
      },
      function(error) {
        alert("Could not fetch jobs from " + $scope.api);
      });
    }

    function getData(resp) {
      requests = [];
      angular.forEach(resp.data.jobs, function(value) {
        requests.push($http.get($scope.api + '/job/' + $scope.customer + '/job/' + value.name + '/api/json'));
         console.log(value.name); // OUTPUT: Job1 Job2
      });

      $q.all(requests).then(function(result) {
        angular.forEach(result, function(value) {
          angular.forEach(value.data.jobs, function(index) {

            if(index.name.match( /(hotfix|release|master)/ )) {

              console.log(index.name); // OUTPUT: branchname1 branchname2
              $http.get($scope.api + '/job/' + $scope.customer + '/job/' + value.data.name + '/job/' + index.name + '/wfapi/runs').then(function(response) {

                angular.forEach(response.data[0].stages, function(index) {
                  console.log(index.name); // OUTPUT: stagename1 stagename2
                  console.log(index.status); // OUTPUT: SUCCESS FAILED
                });
              });
            }
          });
        });
      });
    }
    getJobs("project1", getData);
  })

Возможно ли этосоздать объект из выходов, показанных в console.log? Если нет, то как лучше всего достичь такого результата?

Заранее спасибо.

Answer 1

Чтобы построить объекты из нескольких вызовов API, используйте метод AngularJS $q.all. В отличие от ES6 JavaScript Promise.all , AngularJS $q.all принимает хеш-объект обещаний.

Сначала перефакторируем функцию getJobs, чтобы вернуть обещание:

function getJobs(customer) {
    var url = $scope.api + '/job/' + customer + '/api/json?tree=jobs[name]';
    var promise = $http.get(url);
    var newPromise = promise.then(function(response) {
        var jobs = [];
        angular.forEach(response.data.jobs, function(value, index) {
            jobs.push(value.name);
        });
        return jobs;
    },function(error) {
        alert("Could not fetch jobs from " + $scope.api);
        throw error;
    });
    return newPromise;
}

Затем используйте эту функцию, чтобы создать хеш-объект для разрешения с помощью $q.all:

var dataPromise = getJobs("project1").then(function (jobs) {
    var dataPromiseObj = {};
    angular.forEach(jobs, function (job) {
        dataPromiseObj[job] =  getDataForJob(job);
    });
    return $q.all(dataPromiseObj);
});

dataPromise.then(function(dataObj) {
    console.log(dataObj);
});

Метод .then возвращает новое обещание , которое разрешается или отклоняется с помощью возвращаемого значения successCallback, errorCallback (если только это значение не является обещанием, в этом случае оноразрешается со значением, которое разрешается в этом обещании с использованием цепочка обещаний ).

Для получения дополнительной информации см.

• AngularJS $ q Сервисный APIСсылка - API Promise
• Почему методы обратного вызова от Promise `.then` являются анти-паттерном