angularjs ng-repeat using index rather than names

Question

I use ng-repat to populate an html table with an array.

I have problems normalizing the naming of each property in the array.

Some users are very stubborn and now I have to find a quick work around, if possible.

my array AgendaItems sometimes comes like:

{"Agenda Item":"1","Legistar ID":"62236","Title":"Approval of Minutes","Meeting ID":"49837"}

Other times comes like:

{"AgendaItem":"1","LegistarID":"62236","Title":"Approval of Minutes","MeetingID":"49837"}

The html:

                    <tbody ng-repeat="ai in AgendaItems">   
                        <tr>
                            <td>{{ai.MeetingID}}</td>
                            <td>{{ai.AgendaItem}}</td>
                            <td>{{ai.LegistarID}}</td>
                            <td>{{ai.Title}}</td>
                        </tr>
                    </tbody>

Is there a way that I can use an index value instead that, for example: ai.[i] That way I do not have to worry whether the columns are name with or without a space in between?

Any help is much appreciated.

Thank you, Erasmo

@Dalorzo - do I also change the ai in AgendaItems? would you mind showing me the complete example? Thank you — erasmo carlos
– erasmo carlos, Commented Sep 17, 2020 at 20:26
If you are AgendaItems has spaces it will not be a valid json object, therefore it should be a problem not for angular but for you JS project — Dalorzo
– Dalorzo, Commented Sep 17, 2020 at 20:27
You have implicit access in ng-repeat to scoped variables like $index. However, using $index when iterating over an object rather than an array is rather questionable. — Aluan Haddad
– Aluan Haddad, Commented Sep 17, 2020 at 20:32
Did you try to iterate over "ai" properties like <td ng-repeat="(name, value) in ai">{{value}}</td> ? — Bartun
– Bartun, Commented Sep 17, 2020 at 20:40

Aluan Haddad · Accepted Answer · 2020-09-17 23:09:18Z

1

You have implicit access in ng-repeat to scope properties like $index which the directive provides automatically.

However, using $index when iterating over an object rather than an array is rather questionable.

What you seem to be after is rather a way to iterate over an object's keys and values, which is not questionable and is in fact also supported by ng-repeat via the "(key, value) in object" syntax. The names key and value are arbitrary.

Here's how that would be written:

Firstly, for a single agendaItem, ai

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

Secondly, in the question's context

<tbody ng-repeat="ai in AgendaItems">
  <tr>
    <td ng-repeat="(key, value) in ai">{{value}}</td>
  </tr>
</tody>

edited Sep 17, 2020 at 23:09

answered Sep 17, 2020 at 20:41

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

angularjs ng-repeat using index rather than names

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related