The Build an Object Challenge, Part 2 Solution3:56 with Dave McFarland
Learn how the instructor programmed a solution for this challenge.
Build a Quiz Challenge 2 where I show you how to modify the
How'd it go? 0:00 In this challenge, you are supposed to take the data structure we 0:01 created earlier, an array of student objects, and 0:04 display the information for each of the students on to the web page. 0:07 Here's how I did it. 0:11 I started with the students.js file. 0:13 This has my data structure in it, the array of objects. 0:15 I'm not going to add my programming to this file. 0:19 I like that this file just has data in it. 0:22 I can open this file and 0:24 update the content, adding new students or changing the information about a student. 0:25 And if I was working on this project with someone else, 0:30 they could open this file and 0:32 make changes to the data without worrying about messing up my programming code. 0:34 Instead, I'll create a new file and name it student_report.js. 0:37 [BLANK_AUDIO] 0:43 This file will hold the program to read and print out the student data. 0:46 I need to link this file to my webpage, so 0:52 I'll open the index.html file and I'll just add a script tag here. 0:54 I need to add this tag after the students.js file because my new file, and 1:00 the programming I put in it, 1:05 are dependent upon that array of objects being available. 1:07 In the student report file, I'll add a couple of variables. 1:11 Message will hold a string of HTML that will build up in a loop, 1:15 then print out to the document. 1:19 And we'll use the student variable in the loop to hold a student object each time 1:21 the loop runs. 1:26 To print this out I'll use the print function we created in the last section of 1:27 this course. 1:31 I'll just paste the code for that into this file. 1:32 See the teachers notes for 1:35 a link to a video where I discuss how this function works if your not sure about it. 1:36 The students.js file holds an array of objects. 1:42 To get to each student, we need to loop through the array. 1:46 I'll use the basic for loop. 1:49 This runs the same block of code once for each item in the array. 1:51 We can use array notation to access the student object. 1:56 I'll store that object in the student variable I defined earlier. 2:00 [BLANK_AUDIO] 2:02 Students, with an s, is the array. 2:08 We're using array notation to access one item in that array. 2:12 And then I'm storing that into the variable student. 2:15 Now we can use .syntax to access the name property of that object. 2:19 [BLANK_AUDIO] 2:23 I'll set the message variable to this string. 2:31 I've added h2 tags and 2:33 the text student: and combined that with the value from the variable. 2:35 Let's see how this loop works. 2:40 Let me print out the completed message. 2:42 I'll save the file and preview the workspace. 2:46 The program prints each of the student's names out. 2:51 Let's look at the HTML code we've just produced. 2:54 I'll right-click, or Ctrl+click if you're on a Mac,. 2:57 And choose Inspect Element from the pop-up menu. 3:01 There's the HTML we output. 3:04 Now it's just a matter of adding the other bits of student data. 3:08 A track name, total points, and total achievements. 3:11 Each of those is accessed by using .notation to identify the property and 3:15 retrieve its value. 3:19 [BLANK_AUDIO] 3:20 I'll save this file, and preview the work space. 3:44 Great, you're getting a lot of practice with objects and arrays. 3:47 But I have one final challenge for you. 3:51 I'll tell you about it in the next video. 3:54
You need to sign up for Treehouse in order to download course files.Sign up