1
00:00:02,180 --> 00:00:04,870
Now, if we move on to the next example,

2
00:00:04,870 --> 00:00:09,450
here our goal is to display some dummy user data.

3
00:00:09,450 --> 00:00:11,030
Some dummy user data,

4
00:00:11,030 --> 00:00:15,520
which we actually will create in our JavaScript code.

5
00:00:15,520 --> 00:00:17,950
In reality, that could of course be data

6
00:00:17,950 --> 00:00:21,480
which we fetched from some database or anything like this,

7
00:00:21,480 --> 00:00:24,630
but we don't have all the knowledge we need for this yet.

8
00:00:24,630 --> 00:00:27,520
So at the moment, we'll just work with dummy data.

9
00:00:27,520 --> 00:00:30,610
We will of course, also dive into databases later

10
00:00:30,610 --> 00:00:31,660
in the course though.

11
00:00:32,640 --> 00:00:36,450
So here in this loops, in action JavaScript file,

12
00:00:36,450 --> 00:00:41,450
I'll work on that display user data task

13
00:00:42,070 --> 00:00:45,470
here on this example and I'll start by defining

14
00:00:45,470 --> 00:00:47,510
some dummy data here.

15
00:00:47,510 --> 00:00:51,100
So some dummy user data, actually,

16
00:00:51,100 --> 00:00:54,610
and that's just a JavaScript object like this,

17
00:00:54,610 --> 00:00:58,300
and then this object, I'll just add a first name,

18
00:00:58,300 --> 00:01:02,130
which in my case is Max and a last name,

19
00:01:02,130 --> 00:01:04,519
which in my case is Schwarzmueller

20
00:01:05,430 --> 00:01:08,450
and the age, which is 32.

21
00:01:08,450 --> 00:01:10,660
And of course you can add more dummy data here

22
00:01:10,660 --> 00:01:11,723
if you want to.

23
00:01:12,990 --> 00:01:14,640
But now the goal is to, again,

24
00:01:14,640 --> 00:01:17,900
listen to a click on this button here

25
00:01:17,900 --> 00:01:20,540
and then reach out to this unordered list

26
00:01:20,540 --> 00:01:24,185
and add new list items in there

27
00:01:24,185 --> 00:01:26,383
that represent this dummy data.

28
00:01:27,440 --> 00:01:31,650
And for this here in my JavaScript file, I'll first of all,

29
00:01:31,650 --> 00:01:33,540
get access to that button

30
00:01:33,540 --> 00:01:38,540
and I'll name it, display user data button element

31
00:01:40,800 --> 00:01:43,623
again, a very long, but also descriptive name.

32
00:01:44,490 --> 00:01:46,740
And I will select this button as I did it before

33
00:01:46,740 --> 00:01:49,790
in the other tasks with query selector,

34
00:01:49,790 --> 00:01:52,690
and then by diving into some element with some ID

35
00:01:52,690 --> 00:01:55,690
and selecting the first button there.

36
00:01:55,690 --> 00:02:00,690
And the ID off this section here now is user data.

37
00:02:01,300 --> 00:02:06,163
So I'll use this ID here to select my button like this.

38
00:02:08,360 --> 00:02:13,030
Then with that done, we can add a function as before,

39
00:02:13,030 --> 00:02:17,010
and that's the display user data function.

40
00:02:17,010 --> 00:02:21,070
I guess that name makes sense and ask before we connect

41
00:02:21,070 --> 00:02:23,747
our button by adding an event listener

42
00:02:23,747 --> 00:02:26,830
and just as before that's the click event

43
00:02:26,830 --> 00:02:31,830
where I then want to point at the display user data function

44
00:02:32,230 --> 00:02:33,883
that should be executed.

45
00:02:35,450 --> 00:02:37,870
And now in that function here,

46
00:02:37,870 --> 00:02:42,280
the goal is to get access to this unordered list

47
00:02:42,280 --> 00:02:44,430
and to then add list items to it.

48
00:02:44,430 --> 00:02:49,120
One list item for every property I have in this object

49
00:02:49,120 --> 00:02:52,710
and that streams for a for in loop.

50
00:02:52,710 --> 00:02:55,970
Whenever you have some task that needs to do something

51
00:02:55,970 --> 00:02:58,950
for every property in an object,

52
00:02:58,950 --> 00:03:02,403
that's a prime example for in loop.

53
00:03:03,730 --> 00:03:04,980
But first of all,

54
00:03:04,980 --> 00:03:09,490
I'll get access to the output element

55
00:03:09,490 --> 00:03:14,400
or output data element, whatever you want to name it.

56
00:03:14,400 --> 00:03:18,510
And here we can use document get element by ID

57
00:03:18,510 --> 00:03:21,870
because it turns out that in this HTML file,

58
00:03:21,870 --> 00:03:24,550
this unordered list has an ID.

59
00:03:24,550 --> 00:03:26,700
And of course we can then just use this

60
00:03:26,700 --> 00:03:30,303
ID here to get access to this element in JavaScript.

61
00:03:32,430 --> 00:03:35,530
And then here we create a for in loop

62
00:03:35,530 --> 00:03:38,290
with the for key word again.

63
00:03:38,290 --> 00:03:41,140
But now here we trade a helper constant

64
00:03:41,140 --> 00:03:44,060
just as in the for off loop.

65
00:03:44,060 --> 00:03:47,060
And we can give this constant any name of our choice,

66
00:03:47,060 --> 00:03:52,060
but it will hold the property names as values.

67
00:03:52,520 --> 00:03:54,610
So common choices here,

68
00:03:54,610 --> 00:03:59,610
are property name or key or anything like that.

69
00:04:00,090 --> 00:04:02,313
And I'll go with key here.

70
00:04:03,150 --> 00:04:06,880
And then we use the in keyword and then we point at the

71
00:04:06,880 --> 00:04:09,450
object through which we want to loop.

72
00:04:09,450 --> 00:04:12,063
So in my case, dummy user data here.

73
00:04:14,220 --> 00:04:18,730
And then here inside of that code, inside of that loop code,

74
00:04:18,730 --> 00:04:22,010
we now got access to this key and with help of that key,

75
00:04:22,010 --> 00:04:22,900
as we learned,

76
00:04:22,900 --> 00:04:25,980
we can also get access to the individual values

77
00:04:25,980 --> 00:04:28,533
off those properties in this object.

78
00:04:29,870 --> 00:04:31,160
Now I will start, however,

79
00:04:31,160 --> 00:04:36,160
by creating a new user data list item here,

80
00:04:37,110 --> 00:04:40,500
or list item element to be inline with the other

81
00:04:40,500 --> 00:04:43,582
constant and variable names I chose,

82
00:04:43,582 --> 00:04:46,720
even though that's maybe a bit too long,

83
00:04:46,720 --> 00:04:49,880
and then I'll simply create this element here

84
00:04:49,880 --> 00:04:53,380
with create element and to create element

85
00:04:53,380 --> 00:04:57,040
we pass the element name, which in this case is L I,

86
00:04:57,040 --> 00:04:59,163
since I want to create a list item.

87
00:05:00,730 --> 00:05:02,060
Now, as a next step,

88
00:05:02,060 --> 00:05:06,370
I then want to use my new user data list item element,

89
00:05:06,370 --> 00:05:10,720
and set the text content equal to a string,

90
00:05:10,720 --> 00:05:14,740
which will now actually be made up of multiple blocks

91
00:05:14,740 --> 00:05:18,910
and therefore I'll stored that string in a separate constant

92
00:05:18,910 --> 00:05:21,410
to keep this line of code a short

93
00:05:21,410 --> 00:05:24,480
and concise and not do it all in one line,

94
00:05:24,480 --> 00:05:28,370
which would be possible, but a bit harder to read.

95
00:05:28,370 --> 00:05:33,370
And hence here I'll add a new constant output text

96
00:05:35,120 --> 00:05:39,130
and dad will be a string where I start with my key.

97
00:05:39,130 --> 00:05:42,290
So the name of the property,

98
00:05:42,290 --> 00:05:45,780
which I want to transform to be all uppercase,

99
00:05:45,780 --> 00:05:48,520
and since key holds a string value,

100
00:05:48,520 --> 00:05:51,331
we can do this with the dot notation and then

101
00:05:51,331 --> 00:05:55,240
to upper case, which is a method we can execute

102
00:05:55,240 --> 00:05:58,850
on any string to convert all the characters in there

103
00:05:58,850 --> 00:06:00,503
to uppercase characters.

104
00:06:01,980 --> 00:06:05,810
Then I'll use the plus operator here on a string

105
00:06:05,810 --> 00:06:08,900
to concatenated with another string.

106
00:06:08,900 --> 00:06:11,690
And that should be a string where I add a colon

107
00:06:11,690 --> 00:06:16,690
after this upper case key name and then a white space.

108
00:06:17,230 --> 00:06:20,080
And then I concatenate yet another string,

109
00:06:20,080 --> 00:06:23,740
which should be the value for this property.

110
00:06:23,740 --> 00:06:27,060
And we learned that we get access to that value by using the

111
00:06:27,060 --> 00:06:29,840
object dominant user data.

112
00:06:29,840 --> 00:06:32,870
And then this square bracket notation,

113
00:06:32,870 --> 00:06:37,010
where we then provide our property name,

114
00:06:37,010 --> 00:06:39,650
our key in this case.

115
00:06:39,650 --> 00:06:42,940
And that will dynamically access the different values

116
00:06:42,940 --> 00:06:46,693
of the different keys on that object here.

117
00:06:48,310 --> 00:06:50,330
Now with that, I got my output text

118
00:06:50,330 --> 00:06:54,970
and that's now the text content I want to set here.

119
00:06:54,970 --> 00:06:58,863
And we could have done all of that here in this one line,

120
00:06:58,863 --> 00:07:02,270
but then the line would maybe be a bit too long,

121
00:07:02,270 --> 00:07:05,080
a bit harder to read, and that's why I'm going forward

122
00:07:05,080 --> 00:07:09,460
with helper constant, which I then just referred to here.

123
00:07:09,460 --> 00:07:10,970
And now with that done,

124
00:07:10,970 --> 00:07:13,780
we just need to append this list item

125
00:07:13,780 --> 00:07:17,060
to this output data element.

126
00:07:17,060 --> 00:07:18,200
So as a last step,

127
00:07:18,200 --> 00:07:22,760
I use my output data element and call append

128
00:07:22,760 --> 00:07:26,853
to append the new user data list item element.

129
00:07:28,520 --> 00:07:31,650
Now, if we do that, then we generally have

130
00:07:31,650 --> 00:07:32,990
the behavior we want.

131
00:07:32,990 --> 00:07:35,380
If I saved this and I clicked this button,

132
00:07:35,380 --> 00:07:37,973
we now output this user data here.

133
00:07:38,880 --> 00:07:41,510
However, at the moment, if I click the button again,

134
00:07:41,510 --> 00:07:44,290
we add more and more user data.

135
00:07:44,290 --> 00:07:45,123
And of course,

136
00:07:45,123 --> 00:07:48,690
instead I would want to override the existing user data

137
00:07:48,690 --> 00:07:51,120
with the new user data.

138
00:07:51,120 --> 00:07:54,088
One easy way of achieving this would be

139
00:07:54,088 --> 00:07:58,330
to go back into our display user data function.

140
00:07:58,330 --> 00:08:00,400
And before we entered a loop,

141
00:08:00,400 --> 00:08:03,000
whenever dysfunction is executed, though,

142
00:08:03,000 --> 00:08:06,660
I use my output data element constant here,

143
00:08:06,660 --> 00:08:11,390
so this unordered list and I set inner HTML equal

144
00:08:11,390 --> 00:08:12,900
to an empty string,

145
00:08:12,900 --> 00:08:17,120
which clears all the list items that might exist

146
00:08:17,120 --> 00:08:19,540
inside of that unordered list.

147
00:08:19,540 --> 00:08:22,220
So that removes all existing list items

148
00:08:22,220 --> 00:08:26,110
before we then create an add new ones with help of that

149
00:08:26,110 --> 00:08:28,050
for in loop.

150
00:08:28,050 --> 00:08:30,760
And with this change implemented,

151
00:08:30,760 --> 00:08:34,360
now I can hammer this button and I will still only get

152
00:08:34,360 --> 00:08:37,320
the output once because it's technically removed

153
00:08:37,320 --> 00:08:39,600
and re added with every click

154
00:08:40,590 --> 00:08:43,799
and that's this example implemented

155
00:08:43,799 --> 00:08:47,700
with help of a for in loop and for in loops

156
00:08:47,700 --> 00:08:49,430
are always a great choice

157
00:08:49,430 --> 00:08:54,023
if you need to work with all the properties in an object.