Calling multiple REST APIs using response of first API in AngularJS

Question

I am new to AngularJS and trying to make an application which loads data by calling APIs. It is like I am fetching the list of boxes of type A (Resource Groups) and then each Box of type A has multiple boxes of type B (Virtual Machines). So I have been able to fetch all type A boxes and by using each value of type A box, I have been able to fetch all type B boxes(VMs). But now how shall I put the VM's in respective resource group's panel-body.

(function() {
  var app = angular.module('AzureManager', []);
  app.controller('resourceGroupsController', function($scope, $http) {

    $scope.getRGList = function() {
      $http.get('/resource-group/all').then(function(response) {
        $scope.resourceGroups = response.data.value;
      });
    };

    $scope.getRGList();

  });
})();

<!DOCTYPE HTML>
<HTML ng-app="AzureManager">

<head>
  <title>Azure Manager</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
  <script src="public/app.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Azure Manager</a>
      </div>
      <div class="collapse navbar-collapse" id="topNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Anant</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="container-fluid" ng-controller="resourceGroupsController">
    <div class="panel panel-default" ng-repeat="RG in resourceGroups" id="{{RG.name}}-resources-container">
      <div class="panel-heading">
        <div class="panel-title">{{RG.name}}</div>
      </div>
      <div class="panel-body"></div>
    </div>
  </section>

</body>

</HTML>

What are you trying to do with your resourcegroups? You'd need to call your REST service for each rescourcegroup to get the VM's — Johannes Jander, Jan 31 '16 at 19:05
http://www.martin-brennan.com/using-q-all-to-resolve-multiple-promises/ — changtung, Jan 31 '16 at 19:34
You need to **chain** your `$http` promises. See [Angular execution order with `$q`](http://stackoverflow.com/questions/34324153/angular-execution-order-with-q/34326388). And [AngularJS $q API Reference -- chaining promises](https://docs.angularjs.org/api/ng/service/$q#chaining-promises) — georgeawg, Jan 31 '16 at 20:04

score 0 · Answer 1 · answered Jan 31 '16 at 23:21

Either call a vms/all endpoint by chaining the calls to resource groups and virtual machines and link the virtual machines to their resource groups after both promises have returned.

Or call a endpoint for each resource group:

$scope.getRGList = function() {
  $http.get('/resource-group/all').then(function(response) {
    $scope.resourceGroups = response.data.value;

    $scope.resourceGroups.forEach(function (rg) {
        $http.get('/virtual-machine/'+rg.id).then(function(response) {
            rg.vms = response;
        }
    }
  });
};



  <section class="container-fluid" ng-controller="resourceGroupsController">
    <div class="panel panel-default" ng-repeat="RG in resourceGroups track by RG.id" id="{{RG.name}}-resources-container">
      <div class="panel-heading">
        <div class="panel-title">{{RG.name}}</div>
      </div>
      <div class="panel-body">
        <div class="vm" ng-repeat="vm in RG.vms track by $index">
            {{vm.name}}
        </div>
      </div>
    </div>
  </section>

Calling multiple REST APIs using response of first API in AngularJS

1 Answers1