Hello and welcome to 6.2 lab 3 let's go ahead and dive in! Open this file and your js
file like usual, and let's look at what we're going to do here. We are going to create a
function lab62_3 function and we are going to create two array variables this is were we
are going to deal with parallel arrays, and so you can just copy and paste this code in
here so you don't have to retype everything. Now one thing, let me just take a side step
for a moment and talk about parallel arrays. A lot of times when you are working
on an application you are not going to type it or hard code it in like this. A lot of times
the data you are going to receive is going to come from some other source like a
database that you are getting that information from or maybe a third party so you
are hitting a web service or something were you are pulling that data back.
Whenever you are working with data and parallel like this you just need to be
careful with your logic, for example I had my first student there in my names, Natasha
Peeks and her score is a 76, Boyd, he has a 99. We wouldn't want to mess that up
were Natasha now as a 99 and Boyd as a 76 or Natasha will be extremely happy
and Boyd extremely disappointed. So we want to make sure we work things correctly
when we are working with parallel data, in fact a lot of times what I'll do is if I am getting
this from a database I may lump it into 1 2 dimensional ray and that way I am hitting
one array and I am lumping that stuff together or I use a j son object where I have an
object of Boyd and he has a property of 99, that sort of thing. But sometimes you will
work with parallel arrays like this and I just want to go through this with you so you
understand how these are working. So we are going to have a variable and use
the get by ID to get are table. And then we are going to have a look looking for scores
88 or above. When we hit that, we are going to output the students name and table row
and I have an example of arrays you can click on here to see some information on it
so if you need to take a look at that feel free. Now let's just check the output here, and
the example I have, I am going to have all those names listed if they have 88 or
above. So let's take a look at how we are going to do this, so in our html in our output
div I have a table were I have an ID of outputTable so I can grab it, the class of the
contentTable is just stylistic, and then I created a table row with two headers with the
name and exam score so I can add rows and put them in our columns appropriately
so then in my function I have a scores variable, and I have a names variable with the
appropriate data. Then in my output variable I simply said go into my document get my
element with an ID with outputTable. So I grabbed that html element of outputTable, that
table tag and dumped it in my output variable so now I have a hold on that. And then I
am just doing a loop. So in my loop here I am looping through my scores, starting at 76
and going all the way through to 79 just a normal for loop and I am just testing it
is my score greater than or equal to 88? if it is, then I am saying ok I want to compound
add to my table, a table with a table row with a table data cell with names and
notice I am using, I am hitting, even though I am looping over my scores array
I am hitting my names array and using the same i variable to make sure I pull out
the exact same. So if I am pulling out 99 here I want to pull out Boyd, so that is why
I am using my names bracket notation there and then I am pulling out the scores with
the appropriate html tag intersperse for my cells. So this example is just to show you
how you can go through loop through one array and hit a parallel array at the
same time, you just got to be careful you are doing it correctly so that you pull out
the appropriate information so like in my scenario Boyd is getting the right score
and not Natasha who did not earn her 99 so if you do that correctly you will get that
table. If you have any questions let me know and happy coding!