 Hello everyone, I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I am going to demonstrate how you can render lists using ForEach in HTML. So ForEach is basically a loop and if you have a list, list is basically a collection of data. So if you have lots of data collected in a list and you want to render that list on the UI, so you can implement a loop so that the statements will be repeated automatically and for that purpose we can use ForEach loop. So let's jump to VS Code and I will be creating a lightning web component where I will be demonstrating you like how we can render a list on the UI. So I will be demoing you two examples. In one, I will be creating a list, custom list and in another example, I will be showing you how we can fetch the list from Apex through your S object and how we can render that list on the UI. So let me create first lightning component where I will be creating a custom list. So I am naming it as rendering list ForEach. So this is my component. So first I will be implementing the HTML file. So here inside template, I am going to create a lightning card and its title I am keeping as rendering list for each. So this will be the title of my lightning card. Now, inside this lightning card, I am having an unordered list. So this is a HTML tag that I am using here and here I am going to apply a class SLDS-M-Around underscore medium. So this is SLDS class. So SLDS is basically Salesforce lightning design system. So it provides you feature rich predefined classes. So you can just use them directly. So I am using this class here. Then inside this, so unordered list basically contains different list items. So it is like unordered list where you can have multiple list items. So those list items I will be rendering with the help of a loop. So here I am going to implement template and inside this template I will be implementing ForEach and here I need to pass a list. So list, I am naming it as context and each item of the list will be available one by one in contact variable. So you can assume like this context is a list and one by one item will be available in this context variable. Now inside this template I need to have Li tag that is basically stands for list item. So it is related to UL. UL is unordered list and its element is Li list item. So here we need to set a key. So key I am setting as contact.id. So this contact variable will be having a field called id. So that I am assigning as a key and then I am going to have contact.name, then comma and then contact.title. So these are two more fields. Those will be available in the list. So list will be having id, name and title. So these we are displaying with the help of contact. So contact is a variable that will be receiving data from this context list. So now after implementing this code, next we need to implement the JavaScript file where we need to create this list. So I am jumping to JavaScript file and here inside this curly base we need to implement the list. So here I am going to create a list of like list name is context equals to and inside square bracket. I am opening curly basis. So first time creating id as one. So after one, I need to put up comma. Then I am providing a name. So name I am writing as Sanjay Gupta and then I am putting a title founder of tech school. So this way my first contact is created. So now I am putting comma. So what I can do, I can just copy and paste it so that I can create one more context. So here id is two. Then second context name is Vikas Gupta and instead of founder I am writing CEO of tech school. Then I am pasting it again so that I can have third contact. So here I am writing Arush and the title is MD. So this way like I created a different, different record. So if you want to create more reports so you can. So you just need to provide id and here I am writing a third or maybe I can have manager. So this way I just provided id name and title. So I created four reports and all these records will be available in this context list. So this way in JavaScript you can create your custom list having some values. So I am just saving this JavaScript file now and at the end like after this you can just put a semicolon. So this is saved. Now I am going to save this HTML file. Now I just need to implement meta.xml so here I am putting true. Then I need to set targets and I am having home page as a target because in this code like I just created a custom list. So in this custom list like data is provided by me it is not having any data related to any object and this list will be rendered on the UI with the help of this loop. So this is the first part of this video like I am explaining the custom list how we can render that. Later on after placing this component on the UI I will be demoing you like how we can fetch the sObjects data in terms of records and how we can render that data on the UI. So first of all I need to deploy this from source to org. So this whole lightning web component is being deployed to org. So it is successfully deployed. Now I am jumping to org and I am going to edit this home page and I will be placing this lightning web component on the home base so that we can experience the result. So here you can see rendering list for each is available and I am just dragging and dropping it here and I am clicking on save. Moving back so you can see a component is available here. This is the title which we provided in the lightning card element. So title is displaying and you can see it is showing name and then comma and then title of that particular content. So in the same format we just provided the data here and we use list items so automatically name and titles are displaying in the new line and we used unordered list so that is why bullets are not available here. If I change it to ordered list so we will be having different outputs so I just modified it so I am going to deploy it to org again and I am going to refresh the page. For some reason this ordered list is not working so let me just put a type here. So again I am deploying the updated component to org and I am going to refresh the page. So I think unordered list is not working here I am just undoing it so you can just use unordered list here so in some like in some of the video or any video like I will be showing you ordered how we can show ordered list as well so maybe like we need to use different tag for that purpose so like I hope you understood how we can use unordered list and list item and I hope you also understood like how we can render a custom list that we create in the JavaScript file on the UI. Now let me just open my one component that I created in the previous video so it is like wiring Apex class so I am opening it so I am going to close this one so here is the HTML file I am opening JavaScript file and I am going to open the contact controller and getContext function so it will be available in the Apex so here is the contact controller which is having this getContext function right so okay so first of all first of all we need to understand this HTML file so I am just opening it in the full page so here you can see we have this if condition which is checking whether this record is having some data or not if it is having some data so that will be displayed here and after that here we are having this for each loop so here we are having this list as context and one by one contact will be available in this contact variable and similarly like we implemented unordered list here as well which is having list item the key and first name and last name will be displayed on the UI right now if I show you the JavaScript file so here in JavaScript I just fetched this getContext through this statement so I just imported that function and it will be used with this identifier getContext and here with the help of wire decorator I am just wiring this method so once this component will be loaded on the UI so this method will be executed and here I am passing record ID so this record ID will be of account so this account record ID will be passed as a parameter so basically what will happen the account records like the account ID which I am passing so the context which are related to that account those will be returned here through this wire statement which will be available in this data and we are assigning this data into this context property which is a list so this way if you fetch data from S object so this is the way how you can assign that into a list and that list you can use in your HTML file with the help of this forage and if you see your like contact controller class so here this getContext is available which will be receiving the account ID and basis on that account ID I am applying as a key along contact so all the context which are related to this account will be queried and they will be returned automatically so written type of this method is list of contact so this way list of contact will be returned and it will be stored in that context list that is being like that is already created in that JavaScript file so this way I hope you understood like how we can fetch the data from S object and how we can store that into a list and how we can render that list on the UI so this way if you want to iterate your list in lightning web component so you can use for column each statement so I just try to explain you both the ways like if you have custom list so you can render that as well with the help of for each loop and if you have queried your data from S objects in terms of records and if those are available in the list so you can iterate over that list as well with the help of for each loop