ng-repeat in repeat does not repeat nested object angular

Question

I have a object with categories, inside this object there is a object called items which contain objects with items.

now i want to do in a repeat to display the items like this:

    <div ng-if="delivery_items" ng-repeat="(k, cat_item) in delivery_items">
        <div class="item-cat-header">
            <i class="fa fa-arrow-circle-right"></i> {{cat_item.item_category_name}}
        </div>
        <div class="item-rule" ng-repeat="item in cat_item.items">
            <div class="item-info">
                {{item.item_name}}
                <p class="item-desc"></p>
            </div>
            <div class="item-price">
                €
            </div>
        </div>
    </div>

but for some reason it shows a error

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in cat_item.items, Duplicate key: undefined:undefined, Duplicate value: undefined

the json object looks like this:

what am i doing wrong?

EDIT:

the array creation part:

            //set menu list
        if ($scope.categories_norm) {
            $scope.delivery_items = {};

            //get categories
            angular.forEach(data.item_categories.normal_categories, function (v, k) {
                //push categories
                $scope.delivery_items[v.item_category_id] = v; //create empty catagory object
                $scope.delivery_items[v.item_category_id]['items'] = [];


                if ($scope.items) {

                    angular.forEach($scope.items, function (val, key) {
                        if (v.item_category_id == val.item_category_id) {
                            $scope.delivery_items[v.item_category_id]['items'][key] = val;
                        }
                    });
                }

            });
        }

You have holes in the array. It is not properly indexed.. you can quick fix by doing a track by $index in the second ng-repeat but you should fix your array. — PSL
– PSL, Commented May 28, 2015 at 21:54
yes this shows the right data but it also shows a lot of empty rows now? I also dont understand the holes part? — Reza
– Reza, Commented May 28, 2015 at 21:58

PSL · Accepted Answer · 2015-05-28 22:16:35Z

Your issue is because of holes in the array (sparse array). I can see your first item array is of length 39 but you really do not have 39 items in the array. It is quite visible by looking at your snapshot (0, 9, 16,22 etc..). ng-repeat attaches a tracking id by default (unless you set a track by) to each repeated item as a $hashkey property, but when one of the items is not available it is literally undefined (items[1]) so that (undefined) will be set as key, but then again it gets another undefined item (items[2]) so it throws duplicate in repeater error. You can quick fix by doing a track by $index.

 <div class="item-rule" ng-repeat="item in cat_item.items track by $index">

But now it will show empty item-rule sections. So you should look to fix the array itself by cleaning up or setting the values properly. Check your array creation part.

Update after array creation part was added into the question

Your problem lies in the second loop (see comment before if).

angular.forEach($scope.items, function (val, key) {
   //If the condition here is not met you basically skip that index in the array
   //Remember key represents index of the original array you are iterating through
   if (v.item_category_id == val.item_category_id) {
         $scope.delivery_items[v.item_category_id]['items'][key] = val;
    }
});

change

$scope.delivery_items[v.item_category_id]['items'][key] = val;

to use array.push

$scope.delivery_items[v.item_category_id]['items'].push(val);

I understand your explaination, i have added the array create part. this happens because of the way it is. how can i improve that ?
..just added a counter now and setted the counter, this works but now the first row is empty of every nested repeat
$scope.delivery_items[v.item_category_id]['items'][key] is your problem. instead of that use push.
Yes, the push worked!.. i had done this $scope.delivery_items[v.item_category_id]['items'][i] = val and then a counter in the if else statement.. this also showed all items but then the first row was a empty row. dont know why
@rZaaaa that could be because you did not start with zero or increment it properly.

Liquinaut · Accepted Answer · 2016-11-15 13:42:36Z

0

<div class="item-rule" ng-repeat="(key, item) in cat_item.items track by key" ng-if="item">

That is, if for some reason you have to work your way around a sparsed array in angular instead of reindexing it in the first place.

answered Nov 15, 2016 at 13:42

Liquinaut

3,8171 gold badge23 silver badges17 bronze badges

Collectives™ on Stack Overflow

ng-repeat in repeat does not repeat nested object angular

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related