Looping through properties of object in an array in AngularJS

Question

I would like to loop and print the properties of the array of objects (only one time)

Html

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(key, value) in items">{{key}}</li>
    </ul>
</div>

Script

function MyCtrl($scope) {
    $scope.items = [{'name':10, 'phone':11},{'name':10, 'phone':11}];
}

The desired effect would be:

name

phone

It works only if I have one object and not an array of objects

Here is a link to fiddle http://jsfiddle.net/3vzd732s/2/

Thanks in advance.

paje007 · Accepted Answer · 2015-02-04 13:23:12Z

1

The code that you have given in the question seems to run correctly. In the fiddle istead of {{key}} you have given {{name}}.

If you know that it is going to be an array, how about pointing to the first element in the array?

<li ng-repeat="(key, value) in items[0]">{{key}}</li>

edited Feb 4, 2015 at 13:23

answered Feb 4, 2015 at 13:02

paje007

1,1119 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mzereba Over a year ago

It does run correctly when I have one object, but the issue is when I have an array and I want to read the properties names of the first element for instance. Try with my array above.

paje007 Over a year ago

How about this?<li ng-repeat="(key, value) in items[0]">{{key}}</li>

Artem Petrosian · Accepted Answer · 2015-02-04 13:11:42Z

1

Updated solution after question clarification:

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items track by $index">
            <p ng-repeat="(key, value) in item">{{key}} {{value}}</p>
        </li>
    </ul>
</div>

You forgot to wrap your items in Array in your fiddle example, here is an updated one:

http://jsfiddle.net/3vzd732s/5/

edited Feb 4, 2015 at 13:11

answered Feb 4, 2015 at 12:59

Artem Petrosian

2,9541 gold badge24 silver badges30 bronze badges

7 Comments

mzereba Over a year ago

But the idea is to build the labels dynamically. I am not suppose to know what the properties are.

Artem Petrosian Over a year ago

so, you have to use second ng-repeat inside to achieve this

mzereba Over a year ago

One to loop the array to extract the first object, then one for the element to loop through it's properties?

Artem Petrosian Over a year ago

yep, that's exactly what we did.

Artem Petrosian Over a year ago

and track by $index is recommended to avoid dupes in Array docs.angularjs.org/error/ngRepeat/dupes

|

squiroid · Accepted Answer · 2015-02-04 13:11:36Z

0

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in items">
            <p ng-repeat="(key,value) in item">
            {{key}} {{value}}

        </li>
    </ul>
</div>

Fiddle

UPDATE Change the answer for multiple objects.

edited Feb 4, 2015 at 13:11

answered Feb 4, 2015 at 13:04

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

4 Comments

squiroid Over a year ago

And one thing you are using angular version 1.0.3 and ng-repeat has track by feature enable from 1.2.0

mzereba Over a year ago

Same issue. Look at my comment to paje007, try with my array above.

mzereba Over a year ago

Close thanks, But one time only! it is like printing the labels for a table header

squiroid Over a year ago

Oops sorry miss the <p > tag ending

Collectives™ on Stack Overflow

Looping through properties of object in an array in AngularJS

3 Answers 3

2 Comments

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related