Loop over Object in angular

Question

Im new to angular,(but i have to jump into an existing app someone else made) so im not sure if my terminology is correct, but I am trying to create some dots for an existing carousel, so I need to know how many items are in the carousel

 <div class="dots">
    <p>{{cards.length}}</p>
 </div>

This spits out the number of cards in the carousel,.. but ideally i need a loops before i can do anything .. and im not sure how to accomplish that.

honestly.. im so new to this app.. i couldnt tell you where to find it.. i dont see a card.js or anything like that.. im just working inside the template.... actually i was told.. that, the info for the cards object.. is coming in from an API.. that i dont have access to.. — tallgirltaadaa
– tallgirltaadaa, Commented Mar 7, 2017 at 0:13

kind user · Accepted Answer · 2017-03-07 00:17:31Z

1

You can use ng-repeat method, which will make as many new elements as the cards.length is.

Check the plunker: https://plnkr.co/edit/LsV7ZKR3XMJA9dGayOYu?p=preview

answered Mar 7, 2017 at 0:17

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

tallgirltaadaa Over a year ago

thanks, i super appreciate your plunker, i honestly didn't know which answer to mark and correct, bc they were both correct.. and were helpful.. i just chose the other bc it was first, .. by all means please tell me if this is not the best SO etiquette... actually i see that its the other way around.. the lower ones.. are the oldest.. ill change my answer

jonno · Accepted Answer · 2017-03-07 00:15:30Z

1

You can use the ng-repeat directive:

<p ng-repeat="card in cards">
    {{ card }}
</p>

If cards is an array of objects (a collection) it would be very similar, except you would target one of the properties when binding the data to the view:

<p ng-repeat="card in cards">
    {{ card.property }}
</p>

answered Mar 7, 2017 at 0:15

jonno

767 bronze badges

2 Comments

tallgirltaadaa Over a year ago

i think what i am confused about is, .. i dont actually want any information from the card.. i just need to loop.. and for every instance.. i need to render a dot.. so in the card.property part.. there is nothing i want there...

jonno Over a year ago

Instead of {{ card.property }} you can put whatever you need - like a dot character - and it should render the static value for however many items there are in the array (length).

Rajesh Dwivedi · Accepted Answer · 2017-03-07 00:16:24Z

0

It appears cards is the array which stores information/properties about card object. Use ngFor directive to loop. However, you want to create some dots for an existing carousal. In your query, it is not clear how cards object is related to the dots. Please provide some additional details.

answered Mar 7, 2017 at 0:16

Rajesh Dwivedi

3702 silver badges13 bronze badges

1 Comment

tallgirltaadaa Over a year ago

all i need to do is render as many dots as there are cards, ... dynamically.. the cards are in a carousel.. and i just need to navigate the carousel with the dots..

Collectives™ on Stack Overflow

Loop over Object in angular

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related