-
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!