Build an Object Challenge – One Solution

Hopefully you're able to create the array of objects for 0:00 the first part of this challenge. 0:03 Now I'll show you my solution, go ahead and 0:04 follow along if you haven't started this part yet. 0:06 I'll start by creating an array named pets. 0:09 Inside the array I'll add an object with a property named name. 0:13 I'll assign this property the string Joey. 0:18 Next, I'll add four more properties and their values. 0:21 Type, Breed, 0:25 Age, And Photo. 0:38 I assigned the photo property the path to the image file, 0:47 which means that I also included the image directory name in the string. 0:51 Now I'll type a comma and add four more pet objects to this array. 0:55 You can copy these from the teachers notes if you'd like. 1:00 Notice that each object has the same property names. 1:04 That's because they're all the same type of object, a pet object, and 1:07 they share the same type of properties. 1:11 All right, the first part of this challenge is complete. 1:13 Before moving on, I'll preview index.html in the browser to make sure that I didn't 1:16 make a mistake when creating the array of objects. 1:20 If I did, the JavaScript console will let me know. 1:22 Everything looks good so far, 1:26 now let's move on to the second part of this challenge. 1:28 You have a working data structure holding pet information. 1:31 Next, you'll display that information on the page. 1:34 You will need to access each pet object in the array and 1:37 display the pet's name, type, breed, age and photo. 1:42 To do this, you'll use a loop, loop through each element of the array, and 1:46 build a string that contains all of the pet information, 1:50 then display that information on the page. 1:54 The finished project should display a small directory like this. 1:56 Notice that the directory displays each pet image. 1:59 This means that you'll need to include an image element whose source attribute 2:03 points to the path of the pet image you want to embed. 2:07 And don't forget that alt attribute to hold the description of the image. 2:10 In index.html I have included an example of the html you'll display for 2:16 each pet as a comment inside the main element. 2:20 The tricky part might be accessing the property value of each object within 2:27 the loop. 2:32 Remember, you use dot notation to access a property of an object. 2:33 For example, pet.name, accesses the name property of an object named pet. 2:37 In this case, you'll need to access array elements, so 2:42 you'll also need to use bracket notation to get to each array element. 2:45 [SOUND] For example, you created an array of pet data and named that array pets. 2:48 To access the first pet object, you'd use bracket notation, and 2:55 an index value of zero like this. 2:59 Then to access the name of that pet, you'd use dot notation. 3:01 In the next video, I'll show you how I program the solution to this challenge. 3:05