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
In this video, we'll look at one potential solution to this tricky coding challenge!
So, what solution did you come up with? Don't worry if this challenge was a "giant leap" for you - learning to work with objects, data structures, and loops takes time, practice, and patience. If you came up with a different solution, make sure to share it with the community to get some feedback on what you could improve, adjust, or update for future projects!
In this video, we'll look at an advanced solution to the challenge that uses multiple JavaScript files and the insertAdjacentHTML method to update the content displayed in the browser. If your solution used just one script and the innerHTML property, that's great! If you want to learn more about insertAdjacentHTML method, check out the link below!
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How'd it go?
0:00
For this part of the challenge,
0:01
you had to use the data structure you
created earlier, an array of pet objects.
0:02
And display the information for
each pet on the page.
0:07
Here's how I would do it.
0:10
I'll start with the pets.js file,
which contains my array of pet objects.
0:11
I'm not going to add my
programming to this file.
0:16
This file will hold my data only.
0:18
I can open this file and
update the contents, adding new pets or
0:21
changing the information about a pet.
0:24
And if I was working with another
developer, they could open this file and
0:26
make changes to the data without
interfering with the actual
0:30
programming code.
0:32
Instead, I'll create a new
file named directory.js.
0:34
This file will hold the program
to read and display the pet data.
0:40
I need to link this file
to my index.html file.
0:44
In index.html, I'll add a script tag
0:48
just after the script tag
that points to pets.js.
0:52
I'll set the source attribute
to js/directory.js.
0:57
This new file needs access to
the array of objects in pets.js.
1:05
The browser loads pets.js first,
then loads directory.js,
1:11
giving it access to all
the JavaScript written in pets.js.
1:17
In directory.js, I'll start by
declaring a variable named html.
1:23
html holds a string of html that I'll
build in a loop then render out to
1:28
the document or web page.
1:33
The pets.js file holds
an array of objects.
1:35
To access each pet,
I need to loop through the array.
1:38
I'll use the for loop to do this.
1:42
The loop runs this block of code once for
each element in the pets array.
1:58
Next, I'll access a pet object.
2:04
I'll store that object
in a variable named pet.
2:06
Like earlier, I'm using bracket notation
to access one item in the pets array,
2:14
and then assigning it to the variable pet.
2:19
So that means the pet variable
will be assigned a new pet object
2:23
each time the loop runs.
2:26
Now I can use the pet variable in dot
notation to access the properties
2:28
of each object.
2:32
For example, pet.name,
pet.type, and so on.
2:33
I'll use the addition assignment
operator to build the final
2:37
html string holding the html
to display on the page.
2:41
Within a template literal, I'll first add
a set of h2 tags to display a pet's name.
2:47
I can access the name property
value of the current pet and
2:53
insert it into the string with
dollar sign, curly braces, pet.name.
2:57
I'll test how this is working so
3:05
far by logging the value of
the html variable to the console.
3:07
That's displays five pet
names inside h2 tags.
3:13
Good.
3:17
Now I'll access and
3:19
display the rest of the properties
within the template literal.
3:20
First the type of pet,
which as you can see in this example
3:24
html comment, should
display as an h3 element.
3:27
Between the h3 tags, I'll type
dollar sign curly braces, pet.type.
3:33
I'll also include the breed inside
this h3, so I'll add a vertical bar or
3:39
pipe character.
3:44
Then interpolate the value of pet.breed.
3:45
Next the age which I'll
place within p tags.
3:52
Finally, the pet photo.
4:01
I'll add an image tag, and set its
source attribute to the current value
4:04
of pet.photo, which is the path to
the image file in the image directory.
4:11
Then add an attribute and set the value
to the pets breed with pet.breed.
4:17
I'll save the file.
4:26
And over in the console, I see that I'm
successfully printing out each pet.
4:28
Now it's time to display
the final directory on the page.
4:37
This time I'll use a different approach.
4:41
So far I've used the inner html property
to set the html inside an element.
4:43
Now I'll use a method called
insertAdjacentHTML to add
4:48
the html inside the main
element of index.html.
4:53
As usual, also like the main element
4:58
with document.querySelector('main').
5:02
Once I have a reference to that element,
also called a node,
5:07
I can call the insertAdjacentHTML
method on it.
5:11
It takes two arguments,
5:17
a string instructing where inside
main I want to insert the html, and
5:18
the actual html string you want
to insert into that element.
5:23
Don't worry too much about what this
first argument means right now.
5:27
I'm going to pass it the string beforeend,
which inserts the content just inside
5:31
the element after any other content or
elements that might already be inside it.
5:36
In this case, main is empty.
5:40
And what do I wanna insert inside main?
5:42
The final html string.
5:45
So I'll pass it the html
variable as the second argument.
5:47
If you use the innerHTML property for
this, that's totally fine, too.
5:52
I just wanted to teach you a different
approach that's faster and
5:55
more efficient than setting
the html directly with innerHTML,
5:58
which is helpful when
dealing with lots of data.
6:02
You can learn more about the
insertAdjacentHTML method in the teacher's
6:05
notes with this video.
6:08
You could also assign the element
to a variable like so.
6:10
Then call insertAdjacentHTML
on the variable.
6:21
All right, now I'll save my file and
refresh the browser.
6:26
Each pet displays on the page.
6:32
Looking at the elements
panel in Chrome Dev Tools,
6:34
shows all the rendered markup
inside the main element.
6:38
Great, you've had a lot of practice so
far with loops, arrays, objects, and more.
6:42
You've come a long way.
6:49
I really hope that by diving in and
6:51
getting immersed in the JavaScript
language, concepts are starting to stick.
6:53
Code is gradually becoming more familiar,
and
6:57
that solutions to challenges are becoming
more comfortable to implement.
6:59
Remember, we're always here to help.
7:03
So if you have questions about anything
covered in this course, you can
7:05
get in touch with the friendly Treehouse
staff or other students in the community.
7:08
Thanks, everyone, and happy coding.
7:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up