 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss how you can fetch data using query selector all. So in my previous video, I demonstrated you how you can fetch data using query selector. So in this video, I will be comparing query selector and query selector all. So it is also part of HTML template data binding. So let's jump to Visual Studio Code. So here you can see this is the code which we implemented for understanding query selector. So here we are having like one lightning input and this lightning input, I just fetched here with the help of query selector. Now the requirement is if you have more than one lightning input, so how you can fetch them in the JavaScript file, right? So one more addition I have done in this code. So if you want to see this white background in your component, so you can begin it with lightning card and end it with lightning card and inside that you can put all your code, right? So you can do it for previous demonstrations as well. Now I'm going to modify this code. So here I'm going to write first name and last name. So in the p tag, I have written hello comma first name and then space last name. So these are two properties that I'm going to use here and these properties I will be declaring in the JavaScript file. Then lightning input, name, okay. So here label is name. So I'm just changing it to f name or let's say first name because it will be rendered on the UI. So label is first name and value here. I need to put this property name. So I'm just copying and pasting it here. Then I'm just copying and pasting it here. So in between I'm using one more tag that is BR. BR is for line break. So first name and last name will be in different lines. So this is last name here also last name, right? So first name, last name to lightning inputs are available here. Then we have lightning button. Its label is click me then on click. It will be calling handle click function that I'm going to define the JavaScript file and its variant is brand, right? So this way here you can see two lightning inputs are available. Now one more addition I'm going to do here. So I'm going to provide name to these lightning inputs. So here I'm providing name as f name and here I'm going to provide name as L name. So why I provided these names? Because when I will be fetching both the lightning inputs together with query selector all. So I need to distinguish between them. So to distinguish them we need to provide some unique value or unique name to these lightning inputs. So that is why I'm using this name attribute to put unique name to these both elements, right? So lightning input first is having name as f name and second one is having name as L name. So now I'm just going to save this code and jumping to JavaScript file. So in JavaScript file first of all I need to create two properties named as first name and last name, right? So these two properties are available here. Then I need to define handle click function. So in this function I'm passing event and now after this I'm going to create one variable named as input. Then it will be fetching this dot template dot query selector all. So instead of typing query selector I need to type query selector all and here lightning-input and I'm going to remove this dot value. So all the lightning inputs will be varied, will be fetched and they will be stored in this input variable. Now I'm going to iterate a loop on this input variable. So I'm writing input dot for each, then function and here I'm passing element and opening a curly brace and inside this curly brace I'm going to write if condition. So through element I'm going to compare the name. So as you remember in the HTML file we provided name to these lightning input f name L name. So here I'm going to compare it with f name, right? So if element dot name is equals to f name. So here I'm going to assign this dot first name equals to element dot value, right? So this element will be having values like this input is having two lighting input. So one by one they will be available in this element variable. So this element will be having the first lighting input. So its name is f name. So that is being compared here. If it is equals to f name, then that elements value. So value means if you go to HTML, so value will be this like first name. So it will be assigned into this first name, whatever value is available in that lightning input that will be assigned into this first name, right? And this first name is the property that we declared in the JavaScript. So if we declare any property in the JavaScript file, so we need to use this keyword and whatever value is available in this first name that will be rendered here with the value attribute, right? So this way they are binded. Now after this, I'm going to write else if and here I'm writing element dot name equals to L name, right? And then this dot last name equals to element dot value, right? And then this curly brace is closed after that comma and then I need to write this and then semicolon, right? So this way this for each loop is implemented one by one. Each lighting input will be stored in this element variable and they will be processed accordingly. So now I'm going to save this code. So this way, first I implemented the HTML file, right? And then I implemented the JavaScript code. Now I just need to deploy the changes to the org so that I can refresh the page and I can see the updated result. So I'm just right clicking on this component and just selecting deploy source to org. And here you can see this matter dot XML is already implemented. It is having target as lightning home base. So this component is already placed on home base because I demonstrated it in previous demo as well. So now I'm going to refresh the page and you will see two lightning input, one for first name and one for last name. So here it is for first name and then we have for last name. So I'm typing first name as Sanjay and last name as Gupta. And now if I click on this click me so that function of handle click will be executed and here you will see the result. So you can see Sanjay Gupta first name and last name both are displayed. Now if I modify anyone first name or last name and if I click on click me so you can see the modified value will be rendered on the UI. So this way you can create any number of lightning inputs but do not forget to provide unique name to those lightning inputs. And then with the help of very selected all you can fetch them and with the help of loop you can just identify which lightning input is having particular value. So basis on their name you can distinguish and accordingly you can assign the values to particular property that is declared in JavaScript. So this way I hope you understood how we can use very selector all in lightning wrap components so that we can fetch more than one tags or elements together in JavaScript and we can process that. Thank you.