Iterate over values which are arrays with ng-repeat

2
votes

given the following object:

{
    key1: ["val1","val2","val3","val4"],
    key2: ["val2","val5","val22","val4","val8","val1"],
    key3: ["val1"],
    key4: ["val11","val12"]
}

Is it possible to iterate over all the values in one time using ng-repeat?

My motivation is: 1. I use ng-repeat in a <tr> tag, which CANNOT be placed in the <tbody> and i need to create a row in the table for each value e.g:

<tr>
    <td>key1.val1</td>
</tr>
<tr>
    <td>key1.val2</td>
</tr>
<tr>
    <td>key1.val3</td>
</tr>
<tr>
    <td>key1.val4</td>
</tr>
<tr>
    <td>key2.val2</td>
</tr>
<tr>
    <td>key2.val5</td>
</tr>
... and so on ...
  1. I do not know the keys or value in advanced. I get them through an API

Any Ideas?

Thanks!

2
jsonangularjsangularjs-ng-repeatng-repeat
It doesn't look like you need to the key at all, so just concatenate all the arrays together. Loop through the available keys (properties of the object) and use something like angular.extend(). – ryanyuyu
I think the simplest solution fits best. Just transform your data structure in a simple list and use just one ng-repeat on <tr>. – Michael

2 Answers

3
votes

As your keys are properties of an object I would convert it to an array in a first step:

$scope.keys = [];
for (var property in object) {
    if (object.hasOwnProperty(property)) {
         $scope.keys.push(object.property);
    }
}

Then you may display all values with a nested ng-repeat directive:

<div ng-repeat="key in keys">
   <div ng-repeat="val in key[$index]">
      {{val}}

Edit: There's also a way to iterate over the object properties directly

<div ng-repeat="(key, value) in myObj"> ... </div>

Like documented here:

1
votes
$scope.allValues = [];
angular.forEach(object, function(array) {
    array.forEach(function(value) {
        $scope.allValues.push(value);
    });
});

Then simply use an ng-repeat on allValues.