1
00:00:02,420 --> 00:00:08,060
So the movies which we have in our array should be output on our page

2
00:00:08,100 --> 00:00:15,170
and for that I'll add a brand new function here and you can of course name it however you want,

3
00:00:15,180 --> 00:00:21,120
I'll name it render movies, like this and in render movies,

4
00:00:21,120 --> 00:00:27,990
I will do something which is not the most ideal way of doing it but which is good enough for this demo.

5
00:00:27,990 --> 00:00:33,920
I'll reach out to my movie list, so to this unordered list here in index.html with that ID

6
00:00:33,920 --> 00:00:45,860
here with document get element by ID movie list and then there, I want to render all my movies into

7
00:00:45,860 --> 00:00:46,580
this movie list.

8
00:00:46,580 --> 00:00:53,240
Now the ideal approach would be that for every movie you add, you append one item to the already existing

9
00:00:53,240 --> 00:00:53,710
list,

10
00:00:53,720 --> 00:00:56,330
this is also what we did in an earlier module.

11
00:00:56,360 --> 00:01:02,420
Now here to save some time and focus on objects which is of course the core of this module, I will actually

12
00:01:02,420 --> 00:01:08,360
do it differently and I will reach out to movie list and set innerHTML to an empty string which

13
00:01:08,360 --> 00:01:13,760
will clear it, so that if something was rendered into it, it's now completely deleted.

14
00:01:13,790 --> 00:01:19,190
This is not ideal because now this means that whenever we add a movie, I clear the entire list and

15
00:01:19,190 --> 00:01:23,180
re-render it from scratch which of course costs unnecessary performance

16
00:01:23,180 --> 00:01:25,220
but again I'm doing it here to save some time,

17
00:01:25,220 --> 00:01:32,620
you saw a different approach of appending one item after another in an earlier module. So here I am clearing

18
00:01:32,620 --> 00:01:33,410
this,

19
00:01:33,490 --> 00:01:39,610
I also want to make sure that we can see the movie list to start with because by default if we quickly

20
00:01:39,610 --> 00:01:45,200
have a look at our styles here, we can see that movie list by default has a display style of none

21
00:01:45,310 --> 00:01:50,410
and it only gets a display style of block if we add the visible CSS class to it.

22
00:01:50,410 --> 00:01:58,960
So therefore here whenever we call render movies, I want to check if movies, so my array up there, if the

23
00:01:59,060 --> 00:02:05,080
length which I can access with the dot notation here because length is a property of this array object,

24
00:02:05,590 --> 00:02:11,500
if that is equal to zero which means there are no movies because if there are no movies, then I will

25
00:02:11,500 --> 00:02:20,120
reach out to the movie list and class list and there call remove and remove the visible class if

26
00:02:20,120 --> 00:02:29,590
it's on it, else I will reach out to movie list, to class list and add the visible class and this should then

27
00:02:29,590 --> 00:02:36,880
show it. Now we can also return here after removing the visible class and therefore this innerHTML

28
00:02:36,890 --> 00:02:41,630
clearance can also happen after this if check.

29
00:02:41,840 --> 00:02:44,330
So now with that, we have this logic in place,

30
00:02:44,480 --> 00:02:49,440
now let's make sure we actually output the movies here whenever we call random movies and we don't just

31
00:02:49,460 --> 00:02:55,520
toggle the visibility of the list. So I clear the current content here by setting innerHTML to an

32
00:02:55,520 --> 00:02:56,800
empty string,

33
00:02:56,810 --> 00:03:01,170
now I want to go through all my movies and output them there.

34
00:03:01,190 --> 00:03:07,820
For that we can use a for/of loop or of course also movies ForEach to work with this as well because

35
00:03:07,820 --> 00:03:11,600
we learned about the ForEach method in the arrays section, so why not

36
00:03:11,600 --> 00:03:16,880
and as you learned, you pass a function to ForEach which is then executed for every element in that array

37
00:03:17,450 --> 00:03:19,910
and it will get the element as an input,

38
00:03:19,910 --> 00:03:22,710
so our movie here, you can name it however you want,

39
00:03:22,710 --> 00:03:25,370
I'll name it movie because it's in the end a movie.

40
00:03:25,430 --> 00:03:27,040
I don't care about the other arguments

41
00:03:27,050 --> 00:03:32,990
I could pass here because I don't need them and now we go through all movies here and with us going

42
00:03:32,990 --> 00:03:38,270
through all movies, I want to create new elements, new DOM nodes for every movie of course.

43
00:03:38,270 --> 00:03:46,400
So here we can create a movie element, movie el with document create element and that should be a list

44
00:03:46,430 --> 00:03:47,930
item element,

45
00:03:47,930 --> 00:03:58,180
so with the HTML tag of li and then here to that movie element, I want to set the text content equal

46
00:03:58,180 --> 00:04:06,760
to movie.info.title because remember, our title is stored in that nested info object in each

47
00:04:06,760 --> 00:04:07,390
movie,

48
00:04:07,510 --> 00:04:11,020
so we have to access .info, that yields is a new object

49
00:04:11,050 --> 00:04:16,870
and on that new object we got, we can access .title so you can chain,

50
00:04:16,870 --> 00:04:20,280
that's how it's called, multiple property requests

51
00:04:20,290 --> 00:04:27,430
so to say after each other and with that set here, of course l also want to append that movie to the movie

52
00:04:27,430 --> 00:04:28,330
list.

53
00:04:28,360 --> 00:04:34,060
So on movie lists, I will call append and add my movie element, still in the ForEach because that

54
00:04:34,060 --> 00:04:35,330
should be done for every movie.

55
00:04:36,220 --> 00:04:40,890
So with that, we just have to make sure we call the render movies when we add a new movie,

56
00:04:40,900 --> 00:04:47,110
so here at the end instead of console logging it here, I will call render movies just like this.

57
00:04:47,140 --> 00:04:50,800
So now whenever we add a new movie, it should be rendered.

58
00:04:51,790 --> 00:05:01,910
So now if we reload here and we add Javascript - The Complete Guide, level 5 and I click add movie, you

59
00:05:01,920 --> 00:05:03,840
see that's getting output down there

60
00:05:03,840 --> 00:05:07,200
and if I add another element here, that's getting output there as well.

61
00:05:07,200 --> 00:05:10,750
Now technically always everything gets cleared and re-rendered from scratch

62
00:05:10,860 --> 00:05:16,420
and as I mentioned, that is not ideal but for this demo, it's absolutely OK.

63
00:05:16,440 --> 00:05:22,560
So now we're outputting this here and we already use quite some nice object features,

64
00:05:22,560 --> 00:05:29,550
now what we're not doing is we're not outputting the dynamic user chosen key-value combination here

65
00:05:29,610 --> 00:05:32,610
but I want to output this here as well

66
00:05:32,610 --> 00:05:34,440
so let's see how we can do that.