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-01 07:17:38Z

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 1, 2014 at 7:17

answered Nov 28, 2014 at 12:29

deitch

14.8k15 gold badges75 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

WJA Over a year ago

Also, what do you mean with an injected service. How would that work?

WJA Over a year ago

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 Over a year ago

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);

deitch Over a year ago

Yeah, you could do it that way. As long as it is an object with the right properties in the end.

ian-campbell Over a year ago

Not only does this code not work for me, but it screws up my code for custom interpolateprovider

|

Fernando Santucci · Accepted Answer · 2014-11-28 15:26:28Z

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;

edited Nov 28, 2014 at 15:26

answered Nov 28, 2014 at 15:21

Fernando Santucci

4704 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related