The only thing new in this example is how to access to more than one JSON file. So do you see so this is the first JSON file, and here is the second one. So now when we click the button, one time, the data for the first JSON file gets played this one, which has a name jack and his age and his profession. And when we click, it's time the button will be disappeared. And the data for a second yes and file will be displayed. So it contains a name for someone called Joey and someone called Adam and his age and his proficiency to hearing aid.

So let me see how we can do this. The to start from scratch. So I removed everything. We can Tag. So firstly we define two variables not to us to the input, which is the button and another one to access to the division that will hold the text or the data variable and the first one called etn. You too so now we can make a function for the button.

So btn select go to function and look at this function, we will look in the HTTP request. So, define a variable called you It will show no XML HTTP. So let's hop in. And then the method which is yet and then the name of the Jason file, but which one we will choose that we just Now type the first JSON file, which you call file on. And I will show you later how we can access to the second one. file, one dot JSON, then it's that on load, go to a function guardian.

Will y equal to JSON dot parse? Nothing till now is new. Everything we have explained before, I told you that the new thing is how to access to more than one file. So the goal that will access to the data inside the JSON file will be on another function, and we will just call it here. So it's named as render HTML. It would take white which hold now that Jason data, finally liquid send the request.

So it's that send. Now this will make the function My name is Brenda cheeky l Learn as an argument data. Firstly to make the loop that will loop through all the data inside each JSON time for variable or equal to zero, and then data dot length i plus plus. But we forgot to define a variable to be updated with the loop. So fixed and equal to empty. So within a row, that text will be equal to the old text plus, which will display the name and age So, but let's we'll make all this inside of paragraph 10 Plus is played age.

They'll make another loop to loop through the array here in the first and the second JSON file. Each one of them has an array for work object. Within this lobe, it will display the work. But you see here that the work for here with the first object, just one value and here are two values. So, we have to make an if condition to check if it has one value, so display this value and if it has two values, so, so display the first value, and then check if there is another value, add this value and add another text. So let me see.

Yes, equal zero. So in this case, will equal to x plus data on the work But let's we add text here and work as deals your stand so now just to remain to display this data inside the division that she didn't know the filament that served an event insert adjacent HTML So this even take the position and the variable that we want to display. So I want to explain before and, and the variable is fixed for sure. Which you know, hold all the data within the JSON file. So now we expect that that data that will be appear in the data of the JSON file one. So there's something wrong with chicken syntax error line 26 Rule 26 here HTML and that insert adjacent is not a function.

So there will be with the name of the function, insert adjacent HTML or one of the inputs. So to check this out, you're served. And text is a variable. So tests p without any codes, you say. Nice. So here is the data for the first JSON file, which is for what someone called jack this one Now we want to display the second year some file.

So how we can do this. So we define variable and call it flag. And it will be equal to one, then increment this flag when we click the button, so now when we click the button, select will be equal to two. And here change the name of the JSON file. So it'll be a file plus this flag. So now flag is equal to one.

So it will open file one dot Jason, which is the first JSON file. Then the next clip will be file to the Jason so it will be the second file, the two Chiklis So here's the wrong yeah here. So here is the data for the first JSON file, jack, the little click again. So here is the data for the second JSON file for someone called you and Adam. Nice. So that's how you can make a loan to display more than one JSON file.

Just now remain to remove the button once we click the second time. So if flag is more than two so in this case, button, the style Display the liquid tool number nine nice to add another trick. They want to make this division content in the wall. So there was a candidate in the data. So an attribute content is a one people to show that you save, see, but because we make content available, so the background for the division displayed before we click the resolve this it's too easy To give it a style, we're to display none and then change it here when we click the button. So, HTML no style display, it'll be a virtual look.

So now those are can change anything. Like for example here, work as an English teacher. Nice. So that's everything about how you can access to more than one JSON file. I hope you enjoyed this exercise and see you next time.