To display results of 2 ng-repeats alternately

Question

I need the values returned from {{compNames}} and {{compDesc}} to print alternately, like a top-down stack. But with the 2 ng-repeats I'm not able to get it in that format.

<div class="title">
    <table>
        <tr>
            <td class="comp-names" ng-repeat="compNames in $ctrl.data.compNames track by $index">{{compNames}}</td>
        </tr>
        <tr>
            <td class="comp-desc" ng-repeat="compDesc in $ctrl.data.compDesc track by $index">{{compDesc}}</td>
        </tr>
    </table>
</div>

If I print out {{$ctrl.data}}, I get the following-

{
"details": {
    "comp": { 
        "id": "12345",
        "company_name": "Google",
        "date_created": "2018-01-10 18:03:27",
        "file_name":"Admin.txt"
    }
},
"compNames": ["five","nine","twelve"],
"compDesc": [" String combinations"," String combinations"," String manipulation to eval"]
}

I checked a similar thread and tried to do something like the following but I think it's the wrong approach and doesn't work for me (hence I have given the $ctrl.data output as well)-

<div ng-repeat="data in $ctrl.data">
    <div>{{data.compNames}}</div>
    <div>{{data.compDesc}}</div>
</div>

Shouldn't you iterate through `$ctrl.data.details.compNames`? Because as I can see `$ctrl.data` is an object with only one property of `details` key. — Jakub Chlebowicz, Jan 12 '18 at 18:12
nope.. $ctrl.data.details contains only this part- {"comp":{"id":"12345","company_name":"Google","date_created":"2018-01-10 18:03:27","file_name":"Admin.txt"}} — manishk, Jan 12 '18 at 18:31

score 2 · Accepted Answer · answered Jan 12 '18 at 18:58

2

One solution is to do a zip-operation on the two arrays beforehand in your controller and then iterate over the resulting array.

Something like this:

ctrl.combined = ctrl.data.compNames.map(function(value, index){
    return { name: value, desc: ctrl.data.compDesc[index] };
});

and then iterate over it like this:

<tr ng-repeat="comp in $ctrl.combined track by $index">
    <td class="comp-names">{{comp.name}}</td>
    <td class="comp-desc">{{comp.desc}}</td>
</tr>

or in case you had something else in mind when you said alternating, you can do something like this:

<tr ng-repeat-start="comp in $ctrl.combined track by $index">
    <td class="comp-names">{{comp.name}}</td>
</tr>
<tr ng-repeat-end>
    <td class="comp-desc">{{comp.desc}}</td>
</tr>

Beware that you need to add extra logic to the map-function, in case you expect the two arrays to be of different lengths. But based on your data, it doesn't seem like that'll be an issue.

answered Jan 12 '18 at 18:58

Nikolaj Dam Larsen

5,455
4
32
45

1

I did not think of mapping them both in the controller with **map**.. works like a charm.. thanks! – manishk Jan 12 '18 at 21:25
This works most of the times, but somtimes I get TypeError: Cannot read property 'map' of undefined; is there a workaround for that? – manishk Jan 30 '18 at 20:42
1

Yes, this happens when your result is null/undefined. You should be able to avoid the error my simply changing it to something like `ctrl.data.compNames && ctrl.data.compNames.map(..)`. This basically works similar to a nullcoalesce operator. Alternatively you can check for null/undefined manually before calling the `map` function. – Nikolaj Dam Larsen Jan 30 '18 at 20:45
I put everything inside the condition and that handled it. Thanks! – manishk Jan 30 '18 at 21:18

NTP · Answer 2 · 2018-01-12T21:33:21.600

1

if length of your compNames is equal to compDesc, you can use length in your ng-repeat to iterate length many times

js

$scope.getNumber = function() {
    return new Array( $scope.data.compNames.length);
}

html

<div ng-repeat="i in getNumber() track by $index">
    <div>{{data.compNames[$index]}}</div>
    <div>{{data.compDesc[$index]}}</div>
</div>

demo

edited Jan 12 '18 at 21:33

answered Jan 12 '18 at 18:55

NTP

4,338
3
16
24

I had tried that as well.. to get the count/length and then to iterate over it (because indeed the length of compNames is equal to compDesc).. but yes getNumber() returns an integer.. is there another way of still doing it this way? – manishk Jan 12 '18 at 21:27
I'm glad I was able to help. – NTP Jan 12 '18 at 22:24

To display results of 2 ng-repeats alternately

2 Answers2

Linked