In this video, I want to show you how we can use loops and conditions, in order to add more versatility to our page. So, the first important thing is that when we are dealing with visualization for example, we don't want our code to only work with a fixed number of nodes and rows in disguise, in my case for example here, client. You want your code to be dynamic and work with a different size of lists. So, in order to do that the first thing that we have to do is transform our clients that we have right here that each one is one variable, we want to add all those clients to just one variable, and be able to point them in a different way. So, in order to do that we can use an array. The way we do is basically we don't declare the client anymore. We just remove those declarations, and we're going to declare an array that is basically is going to be called clients. We use the square brackets to define an array. So, we open a square brackets, we put the information inside, and we close the square brackets. The last thing we have to do, we have to separate each element on the array by a comma. So, we add a comma here, between the two clients that I have. So now what we have is a list, and this list can work with as many clients as we want. I can have two, I can have 100. So, the next step is what I want to do right now is to show the BMI for each of those clients, and I want my code to be independent of how many clients I have in my list. So, I already have a function here that computes the BMI given a client. So, the next step is iterate over those clients, and I want to write their BMI to this screen. So, we do that by creating a four loop, and I'm going to declare i, that is going to be my counter, and this counter is going to start from zero. So it's going to be equal to zero, and then it's going to be less than the size of my list. I don't have to worry how many clients I have there, I just going to check how long they are, and the code is going to work. Note that this is less than, not less or equal, because arrays starts from zero. So that's also why i is going to start from zero here. Therefore, if we have two elements in the list, we're going to have i-0 and i-1, so is less than two. So, that's the reason why there is no equal here. Finally we have to increment this variable in each run. So it's going to add one every time we run this four. So, finally we have a loop that is going to go over our clients. Our next step is to actually compute the BMI. So, the first thing is we're going to get the client, and is going to be my variable clients, and we're going to use i to get this client that I'm looking for, and then finally I'm going to get the BMI. So, remember that the variable client now contains wherever client is on my index i. That's going to be zero,one,two,three,four for each element that we have in our list. My BMI is going to be then equal to get BMI, and you're going to pass our client, that's going to return us the BMI. So, finally you are going to write the information to the screen. We do document right, and you're going to write my client name, and we're going to also add the BMI. Note that we don't have a break line between here the number and Jane, so they are concatenated. What you can do to force a break line here is because the way HTML works, you can actually add a tag that is the BR tag. So, you can do BR in order to cause a break line. So, now you actually have John and Jane, and you have their BMI. If I want a new client, I can basically add anyone to the list. If I copy this, and add a new person, James 206 and 70, you see that I didn't have to change anything else in the code, and I get James also in my list. So now, what we want to do is imagine that we only want to show people that are above a certain threshold. So for example here, I only want to show people here that have a BMI higher than 25. So, what you can do is while you are looping through your clients, you can check if their BMI is big enough. So, you can do, if my BMI is bigger than 25, then we're going to write in the screen. Otherwise, we're just going to skip. We won't do anything. So, that's basically what this does. If we save, you see that now we only have people whose BMI is bigger than 25. If you invert and say I want only BMI's less than 25, now you only get Jane because Jane is the only one that has a BMI lower than 25. So, those are ways that we can use force and all the types of loop as well as conditional, to add the flexibility to our page to show any number of data, but also show only the data that we are looking for. So, if the client had away, for example, the user had a way to filter your data to show only what they are looking for, you can use these functions to filter and only display based on whatever specification the user gave to your application. Always remember that when you write your code, you want your code to be independent of how many elements you have. Because if these elements grows or shrinks, your code has to do the same.
