Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one solution to the "Build an Object" challenge.
Array of pet objects:
const pets = [
{
name: 'Joey',
type: 'Dog',
breed: 'Australian Shepherd',
age: 8,
photo: 'img/aussie.jpg'
},
{
name: 'Patches',
type: 'Cat',
breed: 'Domestic Shorthair',
age: 1,
photo: 'img/tabby.jpg'
},
{
name: 'Pugsley',
type: 'Dog',
breed: 'Pug',
age: 6,
photo: 'img/pug.jpg'
},
{
name: 'Simba',
type: 'Cat',
breed: 'Persian',
age: 5,
photo: 'img/persian.jpg'
},
{
name: 'Comet',
type: 'Dog',
breed: 'Golden Retriever',
age: 3,
photo: 'img/golden.jpg'
}
];
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
You need to sign up for Treehouse in order to download course files.
Sign up