How to bind multiple JSON files in ng-repeat (AngularJS)?

Question

I have multiple JSON files:

main.json:

{
  "MainRegister": [
    {
      "name": "Name1",
      "url": "url1.json",
    },
    {
      "name": "Name2",
      "url": "url2.json",
    },
 ]
}

url1.json

{
  "SubInformation": {
    "description": "Hello World 1",
    "identifier": "id1",
  }
}

url2.json

{
  "SubInformation": {
    "description": "Hello World 2",
    "identifier": "id2",
  }
}

Now I want to create a ng-repeat div in my index.html such that it loads all the fields from the files, moreover I want to display the following output:

Name1: Hello World 1 (id1)
Name2: Hello World 2 (id2)

How can I bind these files in a ng-repeat way? Or is there another way?

deitch · Accepted Answer · 2014-12-01T07:17:38.557

2

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

edited Dec 01 '14 at 07:17

answered Nov 28 '14 at 12:29

deitch

14,019
14
68
96

Also, what do you mean with an injected service. How would that work? – WJA Nov 28 '14 at 13:05
Thanks for the update. I noticed that doing so, only the data in the sub-JSON files are accessible. How do I keep the original? Thanks – WJA Nov 28 '14 at 13:20
On my previous question: I have done an edit (needs to be review). Basically replace to the following: $scope.entries.push(angular.extend(entry,data.SubInformation); – WJA Nov 28 '14 at 13:28
Yeah, you could do it that way. As long as it is an object with the right properties in the end. – deitch Nov 29 '14 at 16:09
Not only does this code not work for me, but it screws up my code for custom interpolateprovider – ian-campbell Dec 01 '14 at 03:36
@edmund_spenser what do you mean? – deitch Dec 01 '14 at 07:03
I had this question http://stackoverflow.com/a/27221415/3331268 about making a json array into an iterable array for angular. – ian-campbell Dec 01 '14 at 07:12

Fernando Santucci · Answer 2 · 2014-11-28T15:26:28.327

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;

How to bind multiple JSON files in ng-repeat (AngularJS)?

2 Answers2

Linked