1
00:00:00,490 --> 00:00:01,630
How'd it go?

2
00:00:01,630 --> 00:00:02,990
For this part of the challenge,

3
00:00:02,990 --> 00:00:07,380
you had to use the data structure you
created earlier, an array of pet objects.

4
00:00:07,380 --> 00:00:10,110
And display the information for
each pet on the page.

5
00:00:10,110 --> 00:00:11,540
Here's how I would do it.

6
00:00:11,540 --> 00:00:16,400
I'll start with the pets.js file,
which contains my array of pet objects.

7
00:00:16,400 --> 00:00:18,650
I'm not going to add my
programming to this file.

8
00:00:18,650 --> 00:00:21,060
This file will hold my data only.

9
00:00:21,060 --> 00:00:24,670
I can open this file and
update the contents, adding new pets or

10
00:00:24,670 --> 00:00:26,660
changing the information about a pet.

11
00:00:26,660 --> 00:00:30,000
And if I was working with another
developer, they could open this file and

12
00:00:30,000 --> 00:00:32,970
make changes to the data without
interfering with the actual

13
00:00:32,970 --> 00:00:34,720
programming code.

14
00:00:34,720 --> 00:00:40,580
Instead, I'll create a new
file named directory.js.

15
00:00:40,580 --> 00:00:44,840
This file will hold the program
to read and display the pet data.

16
00:00:44,840 --> 00:00:48,999
I need to link this file
to my index.html file.

17
00:00:48,999 --> 00:00:52,970
In index.html, I'll add a script tag

18
00:00:52,970 --> 00:00:57,340
just after the script tag
that points to pets.js.

19
00:00:57,340 --> 00:01:03,989
I'll set the source attribute
to js/directory.js.

20
00:01:05,583 --> 00:01:11,950
This new file needs access to
the array of objects in pets.js.

21
00:01:11,950 --> 00:01:17,680
The browser loads pets.js first,
then loads directory.js,

22
00:01:17,680 --> 00:01:21,449
giving it access to all
the JavaScript written in pets.js.

23
00:01:23,400 --> 00:01:28,711
In directory.js, I'll start by
declaring a variable named html.

24
00:01:28,711 --> 00:01:33,074
html holds a string of html that I'll
build in a loop then render out to

25
00:01:33,074 --> 00:01:35,520
the document or web page.

26
00:01:35,520 --> 00:01:38,910
The pets.js file holds
an array of objects.

27
00:01:38,910 --> 00:01:42,610
To access each pet,
I need to loop through the array.

28
00:01:42,610 --> 00:01:44,357
I'll use the for loop to do this.

29
00:01:58,483 --> 00:02:04,310
The loop runs this block of code once for
each element in the pets array.

30
00:02:04,310 --> 00:02:06,420
Next, I'll access a pet object.

31
00:02:06,420 --> 00:02:08,845
I'll store that object
in a variable named pet.

32
00:02:14,584 --> 00:02:19,765
Like earlier, I'm using bracket notation
to access one item in the pets array,

33
00:02:19,765 --> 00:02:23,030
and then assigning it to the variable pet.

34
00:02:23,030 --> 00:02:26,460
So that means the pet variable
will be assigned a new pet object

35
00:02:26,460 --> 00:02:28,230
each time the loop runs.

36
00:02:28,230 --> 00:02:32,160
Now I can use the pet variable in dot
notation to access the properties

37
00:02:32,160 --> 00:02:33,390
of each object.

38
00:02:33,390 --> 00:02:37,640
For example, pet.name,
pet.type, and so on.

39
00:02:37,640 --> 00:02:41,650
I'll use the addition assignment
operator to build the final

40
00:02:41,650 --> 00:02:44,710
html string holding the html
to display on the page.

41
00:02:47,640 --> 00:02:53,940
Within a template literal, I'll first add
a set of h2 tags to display a pet's name.

42
00:02:53,940 --> 00:02:57,840
I can access the name property
value of the current pet and

43
00:02:57,840 --> 00:03:03,325
insert it into the string with
dollar sign, curly braces, pet.name.

44
00:03:05,250 --> 00:03:07,037
I'll test how this is working so

45
00:03:07,037 --> 00:03:10,422
far by logging the value of
the html variable to the console.

46
00:03:13,843 --> 00:03:17,430
That's displays five pet
names inside h2 tags.

47
00:03:17,430 --> 00:03:17,930
Good.

48
00:03:19,660 --> 00:03:20,950
Now I'll access and

49
00:03:20,950 --> 00:03:24,190
display the rest of the properties
within the template literal.

50
00:03:24,190 --> 00:03:27,300
First the type of pet,
which as you can see in this example

51
00:03:27,300 --> 00:03:30,150
html comment, should
display as an h3 element.

52
00:03:33,150 --> 00:03:39,730
Between the h3 tags, I'll type
dollar sign curly braces, pet.type.

53
00:03:39,730 --> 00:03:44,400
I'll also include the breed inside
this h3, so I'll add a vertical bar or

54
00:03:44,400 --> 00:03:45,690
pipe character.

55
00:03:45,690 --> 00:03:49,605
Then interpolate the value of pet.breed.

56
00:03:52,023 --> 00:03:55,034
Next the age which I'll
place within p tags.

57
00:04:01,802 --> 00:04:03,160
Finally, the pet photo.

58
00:04:04,240 --> 00:04:09,580
I'll add an image tag, and set its
source attribute to the current value

59
00:04:11,190 --> 00:04:15,830
of pet.photo, which is the path to
the image file in the image directory.

60
00:04:17,780 --> 00:04:23,772
Then add an attribute and set the value
to the pets breed with pet.breed.

61
00:04:26,642 --> 00:04:27,590
I'll save the file.

62
00:04:28,630 --> 00:04:33,290
And over in the console, I see that I'm
successfully printing out each pet.

63
00:04:37,523 --> 00:04:41,150
Now it's time to display
the final directory on the page.

64
00:04:41,150 --> 00:04:43,420
This time I'll use a different approach.

65
00:04:43,420 --> 00:04:48,930
So far I've used the inner html property
to set the html inside an element.

66
00:04:48,930 --> 00:04:53,832
Now I'll use a method called
insertAdjacentHTML to add

67
00:04:53,832 --> 00:04:58,217
the html inside the main
element of index.html.

68
00:04:58,217 --> 00:05:02,938
As usual, also like the main element

69
00:05:02,938 --> 00:05:07,980
with document.querySelector('main').

70
00:05:07,980 --> 00:05:11,602
Once I have a reference to that element,
also called a node,

71
00:05:11,602 --> 00:05:14,525
I can call the insertAdjacentHTML
method on it.

72
00:05:17,184 --> 00:05:18,749
It takes two arguments,

73
00:05:18,749 --> 00:05:23,070
a string instructing where inside
main I want to insert the html, and

74
00:05:23,070 --> 00:05:27,510
the actual html string you want
to insert into that element.

75
00:05:27,510 --> 00:05:31,210
Don't worry too much about what this
first argument means right now.

76
00:05:31,210 --> 00:05:36,550
I'm going to pass it the string beforeend,
which inserts the content just inside

77
00:05:36,550 --> 00:05:40,610
the element after any other content or
elements that might already be inside it.

78
00:05:40,610 --> 00:05:42,740
In this case, main is empty.

79
00:05:42,740 --> 00:05:45,270
And what do I wanna insert inside main?

80
00:05:45,270 --> 00:05:47,280
The final html string.

81
00:05:47,280 --> 00:05:50,890
So I'll pass it the html
variable as the second argument.

82
00:05:52,060 --> 00:05:55,820
If you use the innerHTML property for
this, that's totally fine, too.

83
00:05:55,820 --> 00:05:58,690
I just wanted to teach you a different
approach that's faster and

84
00:05:58,690 --> 00:06:02,920
more efficient than setting
the html directly with innerHTML,

85
00:06:02,920 --> 00:06:05,210
which is helpful when
dealing with lots of data.

86
00:06:05,210 --> 00:06:08,530
You can learn more about the
insertAdjacentHTML method in the teacher's

87
00:06:08,530 --> 00:06:10,020
notes with this video.

88
00:06:10,020 --> 00:06:13,499
You could also assign the element
to a variable like so.

89
00:06:21,747 --> 00:06:25,340
Then call insertAdjacentHTML
on the variable.

90
00:06:26,950 --> 00:06:30,840
All right, now I'll save my file and
refresh the browser.

91
00:06:32,090 --> 00:06:33,640
Each pet displays on the page.

92
00:06:34,890 --> 00:06:38,570
Looking at the elements
panel in Chrome Dev Tools,

93
00:06:38,570 --> 00:06:42,130
shows all the rendered markup
inside the main element.

94
00:06:42,130 --> 00:06:49,730
Great, you've had a lot of practice so
far with loops, arrays, objects, and more.

95
00:06:49,730 --> 00:06:51,360
You've come a long way.

96
00:06:51,360 --> 00:06:53,740
I really hope that by diving in and

97
00:06:53,740 --> 00:06:57,480
getting immersed in the JavaScript
language, concepts are starting to stick.

98
00:06:57,480 --> 00:06:59,790
Code is gradually becoming more familiar,
and

99
00:06:59,790 --> 00:07:03,640
that solutions to challenges are becoming
more comfortable to implement.

100
00:07:03,640 --> 00:07:05,870
Remember, we're always here to help.

101
00:07:05,870 --> 00:07:08,810
So if you have questions about anything
covered in this course, you can

102
00:07:08,810 --> 00:07:12,380
get in touch with the friendly Treehouse
staff or other students in the community.

103
00:07:12,380 --> 00:07:13,780
Thanks, everyone, and happy coding.