- Use `for in` to Loop Through an Object's Properties 4:31
- Loop Through an Object's Properties 2 objectives
- Useful JavaScript Object Methods
- Store Objects in Arrays 3:45
- Create an Array of Objects 2 objectives
- Build an Object Challenge 1:17
- Build an Object Challenge – One Solution 3:09
- Display an Array of Objects on the Page – One Solution 7:14
- Review `for in` and Arrays of Objects 6 questions
Preview
Video Player
00:00
00:00
Build an Object Challenge – One Solution
3:09This video covers one solution to Part One the "Build an Object" challenge, and demonstrates one approach to structuring this data. It then introduces the instructions for Part Two: Rendering the pet information in the browser!
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 teacher's 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