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

<divng-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><divng-controller="ExampleController"><divng-repeat="innerList in list"ng-init="outerIndex = $index"><divng-repeat="value in innerList"ng-init="innerIndex = $index"><spanclass="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;