CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-repeatangularjs-service
Oam Psy
Oam Psy

Reputation: 8661

Nested ng-repeat to repeat on parent repeats ID

I am trying to perform a nest ng-repeat (using ng-repeat-start and ng-repeat-end).

The first repeat displays a list of locations as well as an associated id. For example:

 Mauritius | ID: po8j3mau72
 Dubai | ID: hyf53ygt65
 Sri Lanka | ID: gytf87hg5d

The second repeat 'should' display some amounts spent at each location. However, the repeat should use the _id from the above repeat and perform an HTTP.GET with the _id passed in the endpoint e.g.

http://myserver/endpoint/gytf87hg5d

I can get the first list to appear, and also perform a http request for each _id, but i am stuck as to how to show the amount, eg:

 Mauritius | ID: po8j3mau72
 900, 900, 900, 900

 Dubai | ID: hyf53ygt65
 Sri Lanka | ID: gytf87hg5d

Controller and service:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, myService) {

  $scope.test = 'hello';

    myService.getItemModel(function(itemModel) {

      $scope.myItem = itemModel;


        var itemList = itemModel.items;
        for (var i = 0; i < itemList.length; i++) {
            var addressId = itemList[i]._id;

            myService.getContentModel(addressId)
                .success(function (data, status, headers, config) {
                    $scope.contents = data;
                    console.log($scope.contents);
                })                    
                .error(function (data, status, headers, config) {

                });
        }
    });

});

app.factory('myService', function($http, $q) {
    return {
        getItemModel: function(itemModel) {
            $http.get('itemID.json')
                .success(function(data) {
                    itemModel(data);
                })
                .error(function(error) {
                    alert('An error occured whilst trying to retrieve your item data');
                });
        },
        getCotnentModel: function(addressId) {
            return $http({
                method: 'GET',
                url: addressID + '.json',
                headers: {'Content-Type': 'application/json'}
            });
        }
    }
});

Here's a plunker: https://plnkr.co/edit/oUACLzF5xqNy4pYFSDTg?p=preview

Upvotes: 2

Views: 178

Answers (1)

Mario Lamacchia
Mario Lamacchia

Reputation: 1723

Apart from a couple of typos, you are doing:

$scope.contents = data;

while you should provide different arrays, one for each repeat. I would assign an empty object to $scope.contents and each response under a different key:

$scope.contents = {};
...
itemList.forEach(function(item) {    
  var addressId = item._id;
  $scope.contents[addressId] = data; 
})

NB: I had to replace the for loop with a forEach function, otherwise the addressId would have been overridden and all the responses written under the same key.

In the html you can write:

...
<ul>
  <li ng-repeat-start="item in myItem.items">
    {{item.addressLine1}} | ID: {{item._id}}
  </li>
  <li ng-repeat-end>
    <div ng-repeat="info in contents[item._id].contentHistory">
      {{info.amount}}
    </div>
  </li>
</ul>
...

Here's the updated plunked: https://plnkr.co/edit/sYJ0kIpeKwkgVlpGw3es

Upvotes: 2

Related Questions