How to use aura iteration in lightning component salesforce

Here is the basic example for iterating a collection or list of values in lightning component using aura:iteration tag.

Step 1:
Open Developer Console

Step 2:
Click File --> New --> Lightning Component --> Enter name as "DisplayNumbers" and Submit.

Clear the existing code and paste the below one,

1. <aura:component >
2.     <aura:attribute name="numbers" type="List"/>
3.     <ui:button press="{!c.getNumbers}" label="Display Numbers" />
4.     <aura:iteration items="{!v.numbers}" var="num">
5.         <br/> Number: {!num.value}
6.     </aura:iteration>
7. </aura:component>

Step 3:

Double Click on Controller in right hand side of the component. Clear the existing code and paste the below one,

1. ({
2.     getNumbers: function(component) {
3.         var numbers = [];
4.         for (var i = 0; i < 10; i++) {
5.             numbers.push({
6.                 value: i
7.             });
8.         }
9.         component.set("v.numbers", numbers);
10.     }
11. })

Create a lighting app and refer the above created lightning component and run it.

Output: