1
00:00:00,200 --> 00:00:00,640
OK.

2
00:00:00,690 --> 00:00:06,180
So in this video we're going to focus on taking the result data that we're getting from the API.

3
00:00:06,240 --> 00:00:13,170
Still the hardcoded Calif. and displaying it using edged him out so all that we need to do really is

4
00:00:13,170 --> 00:00:16,610
take this results data and send it to a template.

5
00:00:17,010 --> 00:00:25,540
So first thing we need to do is configure our app so app does set view engine.

6
00:00:25,590 --> 00:00:31,620
And I always forget about the space here and I try and do a few engine but it's not the case we need

7
00:00:31,620 --> 00:00:36,020
space and we're going to set it to Ejay us and save.

8
00:00:36,030 --> 00:00:39,880
And we already have that required and installed for our package.

9
00:00:39,900 --> 00:00:44,560
Jason then what we'll do is make our views directory.

10
00:00:45,130 --> 00:00:53,640
So make directory views then we will create the file use results.

11
00:00:53,720 --> 00:00:54,080
E.J..

12
00:00:54,100 --> 00:00:56,010
Yes.

13
00:00:56,300 --> 00:00:57,270
OK.

14
00:00:57,490 --> 00:01:05,770
Now let's go ahead and open up that file which is in here views results study J.S..

15
00:01:05,940 --> 00:01:17,250
Start simple with an H1 results page should we review rather than doing this redstart send and you get

16
00:01:17,250 --> 00:01:21,240
rid of that and do a red dot render results.

17
00:01:21,240 --> 00:01:23,270
So that should render results study.

18
00:01:23,290 --> 00:01:31,170
Yes let's just double check started for server no problems.

19
00:01:31,170 --> 00:01:31,820
There we go.

20
00:01:31,830 --> 00:01:33,270
We get results page.

21
00:01:33,720 --> 00:01:34,630
Excellent.

22
00:01:34,710 --> 00:01:41,290
So all we need to do is pass this data into our template so that we can use it.

23
00:01:41,310 --> 00:01:44,450
So it's going to be confusing naming everything results.

24
00:01:44,460 --> 00:01:50,500
Let's change the name here to just data then we'll pass that in.

25
00:01:51,180 --> 00:01:57,250
So say inside the template data is data.

26
00:01:58,470 --> 00:02:06,060
So pass this parsed body call data into a template and we'll just keep the name as data and that's it

27
00:02:06,060 --> 00:02:06,320
.

28
00:02:06,360 --> 00:02:16,590
Now in our template we have access to data and if we just save it like that I'll need to restart the

29
00:02:16,590 --> 00:02:20,070
server and refresh.

30
00:02:20,340 --> 00:02:23,910
You just see an object but we know what that object looks like.

31
00:02:23,910 --> 00:02:28,180
And this is where it's helpful to use adjacent to your.

32
00:02:28,310 --> 00:02:29,070
It looks like this.

33
00:02:29,070 --> 00:02:33,080
And we know that you need to access the search key.

34
00:02:33,750 --> 00:02:40,520
And then we have an array and we'll need to loop through that array with a for loop or a for each and

35
00:02:40,530 --> 00:02:42,090
will display each title.

36
00:02:42,270 --> 00:02:44,220
So give it a shot.

37
00:02:44,280 --> 00:02:51,650
First thing is we want data search and we don't need to display it anymore.

38
00:02:51,660 --> 00:02:54,670
So we're going to do a loop on data search.

39
00:02:54,990 --> 00:02:59,690
So again that gives us this array here.

40
00:03:00,000 --> 00:03:10,680
So it's an array we can loop through it we'll do it for each and we'll call each one a movie and then

41
00:03:10,740 --> 00:03:24,600
at our closing races here that I always forget about and we'll start simple by displaying movie title

42
00:03:24,600 --> 00:03:29,290
.

43
00:03:29,580 --> 00:03:30,300
Great.

44
00:03:30,330 --> 00:03:32,700
And let's just play each one as an ally

45
00:03:36,510 --> 00:03:38,850
just like that.

46
00:03:40,110 --> 00:03:42,360
And let's see what happens.

47
00:03:42,390 --> 00:03:50,130
So we're accessing search inside of data and then we're running for each on that for each movie make

48
00:03:50,140 --> 00:03:54,500
an ally with the title and there we go.

49
00:03:54,570 --> 00:03:57,660
That is a list of movies that we're getting from that API.

50
00:03:58,650 --> 00:04:13,860
So we could go here and change California to now be Iowa restarted and ten different movies TV shows

51
00:04:13,860 --> 00:04:21,770
that CSI Iowa that have Iowa and the title Vanilla Ice live at the Iowa State Fair.

52
00:04:21,810 --> 00:04:22,850
Cool.

53
00:04:22,860 --> 00:04:26,940
So that's all there is to the results page.

54
00:04:27,610 --> 00:04:32,010
Well almost all there is now we need to hook it up to a search page that doesn't exist yet and that

55
00:04:32,010 --> 00:04:37,390
search page is going to have a form and this right here.

56
00:04:37,470 --> 00:04:43,350
Iowa will actually be a variable that will be coming from that format so won't always be Iowa.

57
00:04:43,350 --> 00:04:46,800
It will be whatever the user types in to the search route.

58
00:04:47,160 --> 00:04:52,470
So in the next video will set up the search route and get it connected to the results page.

59
00:04:52,470 --> 00:04:52,810
Awesome