 Hello everyone. In this module, you will be learning how you can apply iteration or loop in lightning component. So jumping onto developer console. So in this module, I will be demonstrating two examples. In one, I will be using string as a list and I will be iterating that through or iteration. And second, I will be fetching some data from the subject and then I will be iterating on that list. So let's see first example. So creating one attribute, naming it as games. It's type will be string array. And its default value will be like cricket football tennis. So this way I created list of string name is games. Now, if I want to display these values on UI, like cricket football or tennis, so I need to apply iteration. So I'm using tag, which will display list of games. And then I'm using our column iteration. So here, you need to use items as attribute and then you can provide the dot games, where all the values are available. And then to iterate on that list, we need to use variable where one by one values will be available. So here I'm writing it as game. Now inside this, I'm implementing an order list and inside this list item. And here I'm writing game. So whatever values are available in this games attribute, they will be available in game variable one by one. This game variable is part of our iteration and through this line. Each game will be displayed in different lines. So I am saving this. This is demo application where I'm using this demo component. Clicking on preview. So here you will see list of games is available and one by one each games games is listed. So this way, if you want to apply iteration on collection, so you can do. Now let's see another example where we will be fetching some data from the S object and then I will apply for iteration. So closing these going to create new lightning component, naming it as display accounts and I need to create controller as well. Right. And one apex class will be required. So I'm naming it as account controller. So, okay, it is already available. So let me just open it. Yeah, here it is already implemented. So I implemented it for another example. So what we are doing here we are getting the accounts. Right. So it is returning ID name from account and limit is five. So five accounts will be fast and they will be available in this ACC list. And we are going to return this ACC list. Right. So now we need to use this account controller in the lightning component so that we can have this value in the lightning component and we can iterate over this. So here I need to put controller name account controller. So whenever you want to link your apex controller with the lightning component, so you need to use this attribute. So first of all, I'm creating one attribute, naming it as ACC list. And type will be account. Right. So I'm going to create one handler. Its name will be in it. Value this and action equals to C dot doing it. So whenever this component will be loaded, this or a handler will be executed automatically, and it will be calling this doing it method that we will be implementing in this. Components controller. Right. So through this doing it, we will be fetching the data through this apex controller and the data will be available in this ACC list. Now, I'm going to iterate this ACC list so that results can be displayed on UI. So our iteration items equals to V dot ACC list. So whenever we use any attribute in the in the view of this component, so we need to use V dot. And here I need to create variable so naming it as ACC. Now inside this. I can display the account value so before that I'm writing. The list of accounts. Now here. Account name so. ACC dot name. So as this is a countless and it will be having information related to fields as well. So from here we need to return those so name is written. So we can display that here so name then colon and then account name right this way information will be rendered on the UI. If you want to display any other information, for example, phone type, anything else so you can display those as well like this. Right, so what you need to do you need to query phone field as well so whatever field you are using there so you need to query them from here as well. Right. So what you can do first you can create this apex controller, which is having one method and you need to use this annotation that is or enabled. So this I also explained in my previous model like how to call apex controller through lightning component. Now this part is complete right so this ACC list is iterated and one by one each account will be available in this ACC and through this ACC we are fetching name and phone of particular account record. So I'm saving this. Now I'm going to implement this do init method. So replacing it. Now simply we need to call this apex controller method in this JavaScript controller so that the ACC list attribute that we iterated here will be having some values. Right, so let's implement this. I'm creating a variable naming it as action then component dot get C dot from here I'm copying this pasting it here placing a semicolon. Now action dot set call back this comma function response. Now here I'm writing component dot set V dot ACC list response dot get return value. So this is closed. I need to use one bracket. No, it is available here only. So you need to remove that colleague is sorry now back it then collaboration be there and that down back it will be closed here. Then you need to place semicolon then dollar a dot and q action and action. Right, so this way this JavaScript controller is completely implemented so this through this line. Apex method will be called and through this set call back or whatever values will be returned through this method they will be set into this ACC list that we are iterating over here. And through this dollar a dot and q action this action that we set here will be executed. Right, so everything is set now we need to use this lightning component into demo application. So display accounts. Clicking on preview. So here you can see five accounts are displayed but they are in same line so if you want to display them in separate lines. You can choose BR so here I'm using BR slash here I'm using BR slash twice. And if you want to have horizontal rule after each account record so you can apply this HR tag as well. Now, the refresh. So here you can see list of accounts or first account name phone number second account name phone number and so on. So today you can fetch data from a picks controller through this method, and you need to call that method in this JavaScript controller. And here in the UI, like in the view of this component, you can iterate using or a column iteration on that account list. So this is all about how you can apply iteration or loop and lightning or a component. Thank you.