current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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>

share|improve this question
    
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 yesterday
    
martin-brennan.com/using-q-all-to-resolve-multiple-promises – cyan yesterday
    
You need to chain your $http promises. See Angular execution order with $q. And AngularJS $q API Reference -- chaining promises – georgeawg yesterday
up vote 1 down vote

apiNG was written exactly for this usecase: https://github.com/JohnnyTheTank/apiNG

apiNG is an AngularJS directive that enables you to receive, aggregate and display data from one or more sources. The data can be aggregated, limited and ordered. The complete setup is dead simple, just by adding data-attributes to your html.

You can also nestle apiNG instances.

Sources that apiNG is actually capable of:

In addition, there are some plugins for apiNG. They work as customized sources, e.p. for receiving data from facebook, twitter, instagram, youtube, tumblr, vimeo, github, rss, ...

full documentation: https://aping.readme.io/

share|improve this answer
up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.