1
00:00:00,000 --> 00:00:03,500
In the previous video we
made a fetch request.

2
00:00:03,500 --> 00:00:07,605
It's returning a response that
we're then converting to json, and

3
00:00:07,605 --> 00:00:11,120
we're getting the actual json data
with the URL to display our image.

4
00:00:11,120 --> 00:00:13,985
So, now we'll need to display
the image on the page and

5
00:00:13,985 --> 00:00:17,179
later populate the select menu
with a list of breed options.

6
00:00:17,179 --> 00:00:20,909
So first up, in the second then method,

7
00:00:20,909 --> 00:00:26,067
I'll replace the console.log
with a call to a function

8
00:00:26,067 --> 00:00:31,140
named generateImage()
passing it data.message.

9
00:00:31,140 --> 00:00:33,370
Next we'll need to create this function.

10
00:00:33,370 --> 00:00:39,694
So right below the helper functions
comment create the function generateImage.

11
00:00:41,581 --> 00:00:46,843
The function will take
the parameter (data),

12
00:00:46,843 --> 00:00:53,773
and inside the function,
I'll create a variable named html and

13
00:00:53,773 --> 00:00:58,136
assign it a template literal I'll use to

14
00:00:58,136 --> 00:01:03,040
create the mark up for an <img> and a <p>.

15
00:01:03,040 --> 00:01:07,770
Next, using interpolation,
I'll set the src attribute to

16
00:01:07,770 --> 00:01:13,860
the value passed in for data, so
this will be the URL return from the API.

17
00:01:13,860 --> 00:01:20,130
I'll add an empty alt attribute for
now, and inside the paragraph tags,

18
00:01:20,130 --> 00:01:24,681
I'll display the text,
Click to view images of, and

19
00:01:24,681 --> 00:01:31,277
I'll use interpolation to insert the value
of the select menu into the text.

20
00:01:31,277 --> 00:01:39,861
So I'll type ${select.value}s.

21
00:01:39,861 --> 00:01:45,096
So, for instance, if the value of
the select menu is Affenpinscher,

22
00:01:45,096 --> 00:01:49,310
this will read click to view
images of Affenpinschers.

23
00:01:49,310 --> 00:01:55,380
Finally I'll set the innerHTML
of the selected card element,

24
00:01:55,380 --> 00:02:00,710
so this is the div with the class card,
to the HTML variable.

25
00:02:00,710 --> 00:02:05,980
Now we could have written this template
in code inside the .then method, but

26
00:02:05,980 --> 00:02:09,850
writing as a separate function
keeps the code cleaner and modular.

27
00:02:09,850 --> 00:02:15,210
All right, so I'll give my code a save,
refresh the browser, and

28
00:02:15,210 --> 00:02:17,180
good there's our random dog image.

29
00:02:17,180 --> 00:02:20,920
Now the text doesn't
display the breed name yet,

30
00:02:20,920 --> 00:02:23,640
that's because we haven't added
options to the select menu.

31
00:02:26,570 --> 00:02:28,600
Next, when the page loads,

32
00:02:28,600 --> 00:02:33,690
I'd like to use the breeds/list endpoint
to return a list of all the master breeds.

33
00:02:33,690 --> 00:02:37,681
You can see what the data looks like when
you click the JSON link here in the docs.

34
00:02:37,681 --> 00:02:41,440
As you can see, it's an array
containing the breeds as strings.

35
00:02:41,440 --> 00:02:45,091
Now you could also use the all
dogs endpoint if you'd like,

36
00:02:45,091 --> 00:02:48,962
which includes sub-breeds, but
the data in the master breeds

37
00:02:48,962 --> 00:02:53,728
endpoint is a little easier to work with,
so I'm using it for this workshop.

38
00:02:53,728 --> 00:02:58,270
I wanna use this data to populate
the select menu at the top of the page.

39
00:02:58,270 --> 00:03:00,600
As you can see here in the final example,

40
00:03:00,600 --> 00:03:05,640
each element in the array will create
a selectable option element in the menu.

41
00:03:06,970 --> 00:03:11,470
So back in app.js I'll
create a new fetch request

42
00:03:11,470 --> 00:03:15,330
just like earlier using the fetch method.

43
00:03:16,420 --> 00:03:22,840
I'll pass the method,
the breeds list endpoint, and

44
00:03:22,840 --> 00:03:28,070
chain a .then method that converts
the data and the response to json.

45
00:03:33,100 --> 00:03:34,610
Once we have our json data,

46
00:03:34,610 --> 00:03:38,180
we can render the list of options
inside the select element.

47
00:03:38,180 --> 00:03:43,016
So I'll chain a second .then method and
console.log(data) for now.

48
00:03:50,073 --> 00:03:53,302
Over in the console, notice how this time,

49
00:03:53,302 --> 00:03:59,460
the message properties value is an array
containing all the breeds as strings.

50
00:03:59,460 --> 00:04:04,440
So first, we'll need to map or
iterate over the items in the array,

51
00:04:04,440 --> 00:04:09,490
place them inside option elements,
and insert them into the select menu.

52
00:04:09,490 --> 00:04:11,780
Again, I'll write the JavaScript for
this in a function.

53
00:04:13,510 --> 00:04:18,230
So back in app.js,
just above the generateImage function,

54
00:04:18,230 --> 00:04:26,687
I'll create the function, generateOptions.

55
00:04:26,687 --> 00:04:30,891
The function will take
the parameter (data).

56
00:04:30,891 --> 00:04:36,082
Inside the function I'll create
a variable named options, and

57
00:04:36,082 --> 00:04:41,079
here I'll use the map method,
to iterate over the array,

58
00:04:41,079 --> 00:04:46,180
and return an option element for
each item in the array.

59
00:04:46,180 --> 00:04:50,130
The returned value from this function
will be stored in the options variable.

60
00:04:51,350 --> 00:04:56,790
The map callback will take
the parameter item and,

61
00:04:56,790 --> 00:05:02,840
once again, I'll use a template
literal to return the option elements.

62
00:05:02,840 --> 00:05:05,526
So inside the back tics,
I'll write opening and

63
00:05:05,526 --> 00:05:07,827
closing <option></option> tags.

64
00:05:11,094 --> 00:05:16,794
Next, I'll use interpolation
to insert each returned

65
00:05:16,794 --> 00:05:21,654
breed as the value of the option and
as the text.

66
00:05:25,590 --> 00:05:29,948
Then I'll insert the option
elements into the page while

67
00:05:29,948 --> 00:05:34,322
setting the innerHTML of
the select element to options.

68
00:05:38,785 --> 00:05:42,689
And finally,
up in the first fetch request,

69
00:05:42,689 --> 00:05:47,124
I'll call generateOptions
in our .then method,

70
00:05:49,402 --> 00:05:51,550
Passing it (data.message).

71
00:05:54,300 --> 00:05:56,190
All right, let's have a look.

72
00:05:56,190 --> 00:05:59,600
Over in the browser,
I'll refresh, and good.

73
00:05:59,600 --> 00:06:03,358
Now we can click the select menu
to see the breed options, and

74
00:06:03,358 --> 00:06:07,781
below the image we see the text Click
to view images of affenpinschers,

75
00:06:07,781 --> 00:06:11,781
because that's the first option
displayed in the select menu.

76
00:06:14,001 --> 00:06:18,980
Now one last thing, the map function
returns an array with all the option

77
00:06:18,980 --> 00:06:21,591
elements separated with a comma, and

78
00:06:21,591 --> 00:06:27,161
those commas also get inserted into the
markup, as you can see here in DevTools.

79
00:06:28,858 --> 00:06:33,550
So to remove the commas,
I'll call join() on map() here

80
00:06:33,550 --> 00:06:38,438
in the generateOptions function,
passing it a set of quotes.

81
00:06:44,206 --> 00:06:45,626
And now the commas are gone.

82
00:06:47,487 --> 00:06:52,420
In a later video, we are going to
program the select menu to display a dog

83
00:06:52,420 --> 00:06:54,900
image based on the selected breed.