- 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
Display an Array of Objects on the Page – One Solution
7:14In this video, we'll look at one potential solution to this tricky coding challenge!
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