ng-repeat: access key and value for each object in array of objects

Question

I have an array of objects and I am using an ng-repeat to iterate over them, which is easy. The array looks something like this:

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

And my ng-repeat attribute looks like:

<div ng-repeat="step in steps"> ... </div>

In each iteration, step is equal to one of the objects, as expected. Is there anyway to access both the key and the value of the step object? So that I could do something like this:

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

Where stepName == 'companyName' and isComplete == true. I've tried doing this exact thing but stepName always just ends up being the index of the step object (which makes sense). I'm just trying to figure out if there is another way to write the ng-repeat syntax so that I can get the key and the value.

Thanks for any ideas/suggestions. Much appreciated.

PS. My current work around is to just do this in my controller:

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.push({stepName: stepName, isComplete: isComplete});
});

And then to iterate over that, but it would be nice to do it all in the view

tymeJV · Accepted Answer · 2014-10-23T12:00:17.867

109

A repeater inside a repeater

<div ng-repeat="step in steps">
    <div ng-repeat="(key, value) in step">
        {{key}} : {{value}}
    </div>
</div>

edited Oct 23 '14 at 12:00

answered Oct 23 '13 at 14:46

tymeJV

103,943
14
161
157

1

is there a way to do it without having to create two `
`s for every one of my steps? I could make it work but it kinda seems like a pain to have to adjust my css to work around the extra `
`...
– tennisgent Oct 23 '13 at 14:48
Well you have two iterations, so no (not that I know of, could be wrong). You have to first iterate the array, and then the keys, so an inner loop is the only solution I can think of. – tymeJV Oct 23 '13 at 14:52
1

Ok, sounds good. I was just hoping there was some cool `ng-repeat` syntax that I didn't know of like `ng-repeat="(key,val) for step in steps"` or something similar to `ng-options`. Thanks for the info though. – tennisgent Oct 23 '13 at 14:59
Yeah, Im checking out the docs now, seeing if anything pops out. – tymeJV Oct 23 '13 at 15:00
You could probably solve this by writing a directive and having the link function manipulate the data. – KhalilRavanna Oct 23 '13 at 17:01
my problem is my key is an object it self but i don't know why i cannot get {{key.name}} forexample – Shilan Apr 07 '16 at 09:18

GuillaumeA · Answer 2 · 2013-10-23T15:24:10.877

17

In fact, your data is not well design. You'd better use something like :

$scope.steps = [
    {stepName: "companyName", isComplete: true},
    {stepName: "businessType", isComplete: true},
    {stepName: "physicalAddress", isComplete: true}
];

Then it is easy to do what you want :

<div ng-repeat="step in steps">
 Step {{step.stepName}} status : {{step.isComplet}}
</div>

Example: http://jsfiddle.net/rX7ba/

edited Oct 23 '13 at 15:24

answered Oct 23 '13 at 14:58

GuillaumeA

3,493
4
35
69

I think KayakDave's design is better, but again it's hard to tell without knowing exactly what the data is for. – NicolasMoise Oct 23 '13 at 16:06
1

I dont think that an object with a property value designed as a key is a good idea. The proof is that the object has to be inspected by its key/value pairs which is kind of reflection. Anyway if the solution provided suits better...fine, we dont know exactly what is done with the data. – GuillaumeA Oct 23 '13 at 17:25

score 7 · Answer 3 · answered Oct 23 '13 at 15:06

7

In case this is an option for you, if you put your data into object form it works the way I think you're hoping for:

$scope.steps = {
 companyName: true,
 businessType: true,
 physicalAddress: true
};

Here's a fiddle of this: http://jsfiddle.net/zMjVp/

answered Oct 23 '13 at 15:06

KayakDave

24,636
3
65
68

2

Yea I agree, this seems like a better data structure. Although, it's hard to tell without knowing exactly what the data is for. – NicolasMoise Oct 23 '13 at 16:05
This doesn't preserve the order of key-value pairs in case you want it to be preserved. – mostruash Jul 06 '15 at 15:07
And judging from the data structure it would seem order matters. – Aaron Jul 08 '15 at 16:54

score 3 · Answer 4 · answered Oct 23 '13 at 16:17

I think the problem is with the way you designed your data. To me in terms of semantics, it just doesn't make sense. What exactly is steps for?

Does it store the information of one company?

If that's the case steps should be an object (see KayakDave's answer) and each "step" should be an object property.

Does it store the information of multiple companies?

If that's the case, steps should be an array of objects.

$scope.steps=[{companyName: true, businessType: true},{companyName: false}]

In either case you can easily iterate through the data with one (two for 2nd case) ng-repeats.

James Drinkard · Answer 5 · 2016-02-09T20:51:46.147

2

Here is another way, without the need for nesting the repeaters.

From the Angularjs docs:

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:

<div ng-repeat="(key, value) in steps"> {{key}} : {{value}} </div>

edited Feb 09 '16 at 20:51

answered Feb 09 '16 at 19:03

James Drinkard

15,342
16
114
137

good only for $scope.steps = { companyName: true, businessType: true, physicalAddress: true }; – Morgan RotaStabelli Dec 16 '16 at 08:59
not for original request $scope.steps = [ {companyName: true}, {businessType: true}, {physicalAddress: true} ]; – Morgan RotaStabelli Dec 16 '16 at 09:00

score -1 · Answer 6 · answered Feb 21 '15 at 05:45

-1

seems like in Angular 1.3.12 you do not need the inner ng-repeat anymore, the outer loop returns the values of the collection is a single map entry

answered Feb 21 '15 at 05:45

Matthew Chen

1,544
11
11

ng-repeat: access key and value for each object in array of objects

6 Answers6

Linked