1
00:00:01,730 --> 00:00:06,230
Let's take that results right, and build out a list to show inside of all of our J x x down here.

2
00:00:07,010 --> 00:00:10,310
I'm going to make a new variable right above our return statement.

3
00:00:11,210 --> 00:00:14,270
No call it rendered results.

4
00:00:15,070 --> 00:00:18,950
And that's going to be the result of doing a results dot map.

5
00:00:20,340 --> 00:00:25,890
We'll take a look at every article or every kind of result that we got back and build out a list out

6
00:00:25,890 --> 00:00:26,160
of them.

7
00:00:27,470 --> 00:00:33,590
Inside this mapping statement, I'm going to return a div with a class name of item.

8
00:00:35,680 --> 00:00:37,300
Do a little bit of formatting here.

9
00:00:39,240 --> 00:00:39,750
There we go.

10
00:00:41,370 --> 00:00:42,480
Then inside of that d'Hiv.

11
00:00:43,690 --> 00:00:49,090
We're going to put in a div with a class name of content.

12
00:00:51,250 --> 00:00:51,840
And close it off.

13
00:00:52,880 --> 00:00:55,860
Well, then put in a div with the class name of Heather.

14
00:00:56,950 --> 00:00:57,700
And close it off.

15
00:00:58,510 --> 00:01:02,840
And then inside of here, we're gonna print out the title of the article we just fetched, though,

16
00:01:03,010 --> 00:01:06,050
the immunity idol of the article.

17
00:01:06,460 --> 00:01:10,810
If we take a look at the request that we are making or more specifically, the response.

18
00:01:11,900 --> 00:01:17,540
The title of the article is available as the title property so we can put inside of your result thought

19
00:01:17,540 --> 00:01:17,960
title.

20
00:01:19,700 --> 00:01:24,830
Then immediately after that, d'Hiv, we're going to print the kind of summary of the article itself.

21
00:01:25,520 --> 00:01:27,650
That would be the snippet right there.

22
00:01:28,550 --> 00:01:29,390
So I will put in.

23
00:01:30,690 --> 00:01:31,070
Result.

24
00:01:31,990 --> 00:01:32,380
Not.

25
00:01:37,300 --> 00:01:38,080
So that's our list.

26
00:01:38,320 --> 00:01:43,150
So we now need to take rendered results and show it inside of all of our J sex down here.

27
00:01:45,190 --> 00:01:47,750
I'm gonna find the closing div of UI form.

28
00:01:48,050 --> 00:01:50,520
So that's the closing date right there and right after it.

29
00:01:50,550 --> 00:01:55,620
I'm gonna put in another div with a class name of UI spelled list.

30
00:01:57,340 --> 00:02:01,240
And then inside there, we'll print out rendered results.

31
00:02:03,120 --> 00:02:04,080
OK, I'm going to save that.

32
00:02:04,350 --> 00:02:06,210
Let's go back over and see what we got.

33
00:02:07,260 --> 00:02:07,770
All right.

34
00:02:08,520 --> 00:02:11,040
Well, it's not great.

35
00:02:11,430 --> 00:02:14,900
We definitely the list, but something is not quite right about it, though.

36
00:02:14,970 --> 00:02:16,300
If you take a very close look at this.

37
00:02:16,320 --> 00:02:19,410
You'll notice that in the response we get back from the API.

38
00:02:19,920 --> 00:02:24,780
Wikipedia is automatically giving us a response that has some each female written inside of it.

39
00:02:25,320 --> 00:02:30,030
And the goal of that is to, well, highlight the search term that was found in the article.

40
00:02:30,630 --> 00:02:32,040
So I search for programming.

41
00:02:32,520 --> 00:02:37,500
And so in all these little snippets, Wikipedia has found the word programming and wrapped it with a

42
00:02:37,500 --> 00:02:40,440
span that has a class of search match.

43
00:02:41,070 --> 00:02:43,440
This is supposed to be done as kind of a convenience thing here.

44
00:02:43,720 --> 00:02:46,400
We can tell that for us it's not super convenient.

45
00:02:46,410 --> 00:02:51,240
It's giving us these kind of nasty A.T.M. inside of all of our results.

46
00:02:52,730 --> 00:02:57,890
The other little issue I mentioned very quickly, I completely neglected to add a key property to each

47
00:02:57,890 --> 00:02:58,850
of those search results.

48
00:02:59,570 --> 00:03:03,860
Let's first take care of fixing up that key property and then we'll figure out how to remove that ugly

49
00:03:03,860 --> 00:03:05,300
looking H.T. inside there.

50
00:03:05,540 --> 00:03:08,120
After that, to remove the key property.

51
00:03:10,420 --> 00:03:13,360
You'll notice that in the response we get back.

52
00:03:14,410 --> 00:03:20,530
Every result we have has a page I.D. and so we can use this page I.D. as the key property because as

53
00:03:20,530 --> 00:03:22,810
usual, it is probably consistent and unique.

54
00:03:25,200 --> 00:03:27,460
We're going to find my list on that d'Hiv.

55
00:03:28,090 --> 00:03:30,580
I'll put in the key property as a result.

56
00:03:31,160 --> 00:03:34,840
That age I.D. and I want you to take a really close look here.

57
00:03:35,200 --> 00:03:36,590
I.D. is lowercase.

58
00:03:36,970 --> 00:03:41,280
We need to put in page I.D. with a lowercase I.D., though, page I.D..

59
00:03:41,710 --> 00:03:42,820
Make sure it's lowercase.

60
00:03:44,580 --> 00:03:45,320
When we're safe.

61
00:03:46,200 --> 00:03:48,870
Well, it looks like that era has gone away.

62
00:03:49,270 --> 00:03:51,630
Now we just need to figure out all this H.T. mail stuff.

63
00:03:52,350 --> 00:03:54,840
Let's figure out how to remove all that H.T. mail in just a moment.