Angularjs ng-repeat how do I get the object key name?

Question

I am using Angularjs to search and display data stored in a documentDB. I have a Web Api 2 (.net) serving the data using IHttpActionResult.

When I look at the data returned from a $http,get I can see the structure is as expected, one of the properties of the document returned is called identifiers and is a collection of different identifers in a key value pair type scenario... see below..

 "identifiers": {
  "sourceid": null,
  "secondaryid": null,
  "name": null,
  "anotherid1": null,
  "anotherid2": "412417118",
  "etc": null
},

Obviously my actual data has different names for the sub identifiers replaced with generic names above...

in my Html I am using ng-repeat to display the list of identifiers for each record like so:

   <tbody>
                <tr>
                    <td >
                        <label>Identifiers: </label>
                    </td>
                    <td >
                        <p ng-repeat="ident in vessel.identifiers"> {{ident}}</p>
                    </td>
                    <td>
                        <label>Start Date: </label>
                    </td>
                    <td>
                        {{ vessel.startdate | date : 'dd/MM/yyyy'}}
                    </td>
                    <td>
                        <label>End Date: </label>
                    </td>
                    <td>
                        {{ vessel.enddate | date : 'dd/MM/yyyy'}}
                    </td>
                </tr>.........

However What I get written out is simply the value of each identifier but without the key or anything ... I have tried passing that to a function on the controller but when I do that and console.log the input it is literally just the string value, no longer a key/value pair.....

How to I get it to write the key and the value??

Interestingly if I get rid of the ng-repeat and just but {{identifiers}} in that <p> tag, I get the following written out...

{"sourceid":null,"secondaryid":null,"name":null,"anotherid1":null,"anotherid2":"BJ5077","anotherid3":null,"etc":null,"etc2":""}

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

After coming at it a different way and taking inspiration from the stackoverflow post (linked here to help others) it was the syntax of my ng-repeat which was incorrect, it should have looked like this... obvious when you think about it!!!

 <p ng-repeat="(key, value) in vessel.identifiers"> {{key}} : {{value}} </p>

edited May 23 '17 at 12:15

Community

1
1

answered Dec 23 '15 at 17:08

dreadeddev

268
5
16

Angularjs ng-repeat how do I get the object key name?

1 Answers1