Iterate over array which includes objects

Question

I am wondering how can I view different objects within an object using ng-repeat?

This is the following code that I have so far, to iterate over the $ID of the objects in array:

<div ng-repeat="message in messages"> {{message.$id}} </div>

This is how my array looks like: https://i.sstatic.net/DnHxO.jpg As you can see, the array structure looks like that:
--Item[0]:
-----$Id:xxxxx
-----Message1(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
-----Message2(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
--Item[1]:
-----$Id:xxxxx
-----Message1(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"
-----Message2(unique ID):
-------------:date: "XX-XX-XXXX"
-------------:message: "whatever"
-------------:sender: "xxxxxxxxxxxxxxxxxx"

Etc.

TLDR: How can I use ng-repeat to repeat over the objects within an item of an array? Also, can I use ng-repeat to get the last object in an item? For example, the last Message sent?

Thanks!

Honestly, I havent though of that. Would it be something like ng-repeat="values in message", and then just {{values}} within the right div? — uksz
– uksz, Commented Mar 20, 2015 at 12:28
you can use some variation of nesting to achieve it.. for reference purpose, follow this post — Aakash
– Aakash, Commented Mar 20, 2015 at 12:31
Nested repeats is the way to go however with the way your data is organized there is no easy way to distinguish between a message and the id or priority. Consider transforming your data structure to add a messages array to your object and storing all the messages in it. Then it becomes a simple nested repeat on the messages array. — Cerad
– Cerad, Commented Mar 20, 2015 at 12:37
Thank you all for answering my post. I've tried nested ng-repeat and it works like a charm. :) — uksz
– uksz, Commented Mar 20, 2015 at 13:45

Community · Accepted Answer · 2017-05-23 12:28:18Z

0

You don't mention whether the items in your array are arrays or JSON objects. If you have an array of JSON objects then this will work

vm.objectsTest = [{$id : 123}, {$id: 234}];
<ul ng-repeat="o in vm.testObjects"><li ng-bind="o.$id"></li></ul>

If your items are arrays then you will need to access the object within the array, like this:

vm.objectsTest = [[{$id : 123}], [{$id: 234}]];
<ul ng-repeat="o in vm.testObjects"><li ng-bind="o[0].$id"></li></ul>

Alternately if you need to iterate over the items of your nested array, then you may need to have nested ng-repeats. However the best option would be to change your data structure as using ng-repeat excessively can create performance issues.

See this post for accessing the last element of ng-repeat Different class for the last element in ng-repeat

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 20, 2015 at 12:38

emjrose

1124 bronze badges

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

3 Comments

uksz Over a year ago

Thank you emjrsoe for you answer! I've tried nested ng-repeat and it works with no issues. Do you have any suggestions when it comes to restructuring my data?

emjrose Over a year ago

If you have an array of JSON objects [{$id : 123}, {$id: 234}], you can avoid the nested ng-repeat.

uksz Over a year ago

Thank you! Have a greate one!

Collectives™ on Stack Overflow

Iterate over array which includes objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related