How To Bind Multiple JSON Files In Ng-repeat (AngularJS)?

I have multiple JSON files: main.json: { 'MainRegister': [ { 'name': 'Name1', 'url': 'url1.json', }, { 'name': 'Name2', 'url': 'url2.json',

Solution 1:

You need to load them first, then set up a scope variable that contains the necessary data in an array. You can do the $http get in your controller (as in the example below), but if it is anything reusable or more than a simple app, I would recommend doing it in an injected service.

.controller('MyCtrl', function($scope,$http){
   $scope.entries = [];
   $http.get('main.json').success(function(data) {
      angular.forEach(data.MainRegister,function(entry) {
         $http.get(entry.url).
          success(function(data) {
            $scope.entries.push(angular.extend(entry,data.SubInformation);
         });
      });
   });
});

and then your template can look something like

<div ng-repeat="entry in entries">
  <span>{{entry.name}}: {{entry.description}} ({{entry.id}})</span>
</div>

You can use filters if you want to order them, or load the $scope.entries in a particular order, or if you don't want to show any entries until all are ready, then you can set a ready var, or only set $scope.entries at the end, etc.

Let me add that I don't like that kind of deeper and deeper embedded ajax calls, as well as the series of them, but it is a question of style. I have become a big fan of caolan's async library for making the above controller code far cleaner. http://github.com/caolan/async

Solution 2:

The Simple Way:

Analog to UNION statement of SQL ANSI.

For more information, see the example of https://docs.angularjs.org/api/ng/directive/ngInit

<script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [['a', 'b'], ['c', 'd']];
    }]);
</script>
<div ng-controller="ExampleController">
  <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
    <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
       <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
    </div>
  </div>
</div>

Result:

list[ 0 ][ 0 ] = a;
list[ 0 ][ 1 ] = b;
list[ 1 ][ 0 ] = c;
list[ 1 ][ 1 ] = d;