AngularJS build object from three different api calls

Question

i want to build a jenkins dashboard with angularJS. I need or want (don't know if the idea is good) combine the data I received from three different API calls to build an object out of it to use it as ng-repeat in the html file.

The data structure should look like:

JSON object

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

AngularJS code

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

Is it possible to create an object out of the outputs shown in console.log? If not what is the best way to achieve a result like this?

Thanks in advance.

georgeawg · Answer 1 · 2019-11-04T19:14:36.273

To build objects from multiple API calls, use the AngularJS $q.all method. Unlike ES6 JavaScript Promise.all, AngularJS $q.all accepts a hash object of promises.

First, re-factor the getJobs function to return a promise:

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;
}

Then use that function to create a hash object to resolve with $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);
});

The .then method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback (unless that value is a promise, in which case it is resolved with the value which is resolved in that promise using promise chaining).

For more information, see

Hi, thanks for the quick feedback. The first function is working perfectly! I did the same with the second one and get those returns {CORS: Array(3), MORS: Array(3)} CORS: Array(3) 0: "hotfix" 1: "master" 2: "release" MORS: Array(3) 0: "hotfix" 1: "master" 2: "release" How is it possible to achieve a structure like Job1": { "branchname1": { "stagename1": { "stage_status": "SUCCESS" }, Should i create a function for each api call or should I leave the rest all in one? — Marv, Nov 05 '19 at 14:47

AngularJS build object from three different api calls

1 Answers1