title: AngularJS build object from three different api calls
body: <p>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.</p>
  
  <p>The data structure should look like:</p>
  
  <p><strong>JSON object</strong></p>
  
  <pre><code>{
    "Job1": {
      "branchname1": {
        "stagename1": {
          "stage_status": "SUCCESS"
        },
        "stagename2": {
          "stage_status": "FAILED"
        }
      }
    },
    "Job2": {
      "branchname1": {
        "stagename1": {
          "stage_status": "SUCCESS"
        },
        "stagename2": {
          "stage_status": "FAILED"
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>AngularJS code</strong></p>
  
  <pre><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);
    })
  
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks in advance.</p>