1
00:00:02,060 --> 00:00:03,610
Now, let's add a new path,

2
00:00:03,610 --> 00:00:06,900
which allows us to output all the users stored

3
00:00:06,900 --> 00:00:08,860
in users.json in a way

4
00:00:08,860 --> 00:00:11,210
that allows the visitors of our page

5
00:00:11,210 --> 00:00:15,080
to see them on this loaded page.

6
00:00:15,080 --> 00:00:18,380
And for this, I'll add a brand new route here

7
00:00:18,380 --> 00:00:21,230
with app, and then it will be a route

8
00:00:21,230 --> 00:00:23,910
that should handle incoming GET requests.

9
00:00:23,910 --> 00:00:26,190
So I'll use the get method here,

10
00:00:26,190 --> 00:00:29,430
and then let's say we wanna handle GET requests sent

11
00:00:29,430 --> 00:00:32,250
to our domain /users.

12
00:00:32,250 --> 00:00:34,923
Though the path, of course, is totally up to you.

13
00:00:36,030 --> 00:00:38,600
Here we then have this handler function

14
00:00:38,600 --> 00:00:40,660
as we did before.

15
00:00:40,660 --> 00:00:44,780
And now in here, I wanna open this file,

16
00:00:44,780 --> 00:00:48,090
read the data and translate it from raw text

17
00:00:48,090 --> 00:00:50,300
into a JavaScript array,

18
00:00:50,300 --> 00:00:53,283
and then send back a response with that data.

19
00:00:54,360 --> 00:00:56,200
Now, of course, for that we can, first of all,

20
00:00:56,200 --> 00:01:00,150
copy some code from there, to be precise, this code

21
00:01:00,150 --> 00:01:02,570
where we build the path, read the file

22
00:01:02,570 --> 00:01:04,030
and parse the data.

23
00:01:04,030 --> 00:01:06,980
And we could outsource this into a separate function,

24
00:01:06,980 --> 00:01:08,690
which we then reuse.

25
00:01:08,690 --> 00:01:10,250
But here that's not the focus

26
00:01:10,250 --> 00:01:13,063
and copying it isn't too bad, so let's do that.

27
00:01:14,840 --> 00:01:17,897
So now we got our stored users here.

28
00:01:17,897 --> 00:01:22,273
Now we can send back a response with that data.

29
00:01:23,170 --> 00:01:27,220
For this, we can use this response object here,

30
00:01:27,220 --> 00:01:29,290
and again use send

31
00:01:29,290 --> 00:01:33,343
and we could now just send back existingUsers like this.

32
00:01:34,320 --> 00:01:37,100
If we try to do this,

33
00:01:37,100 --> 00:01:42,100
and we do stop the existing server and start a new one,

34
00:01:42,140 --> 00:01:47,140
then if we go to localhost:3000/users,

35
00:01:48,410 --> 00:01:51,163
we actually should see our user data like that.

36
00:01:52,430 --> 00:01:54,080
So as a side note here,

37
00:01:54,080 --> 00:01:57,320
you can send just a JavaScript array

38
00:01:57,320 --> 00:02:01,000
and Express will automatically basically translate this

39
00:02:01,000 --> 00:02:04,403
back into some raw text, which it then outputs like that.

40
00:02:05,630 --> 00:02:07,090
So that works.

41
00:02:07,090 --> 00:02:10,009
But I wanna output an actual HTML list

42
00:02:10,009 --> 00:02:13,743
where every username should be a standalone list item.

43
00:02:14,630 --> 00:02:18,900
And for that, I'll add a brand new variable here,

44
00:02:18,900 --> 00:02:20,917
which I'll name responseData,

45
00:02:22,400 --> 00:02:26,070
which is a string that starts with an unordered list tag

46
00:02:26,070 --> 00:02:27,760
that I open up.

47
00:02:27,760 --> 00:02:30,130
So with the opening unordered list tag,

48
00:02:30,130 --> 00:02:33,293
but with no closing unordered list tag.

49
00:02:34,600 --> 00:02:37,080
Now I wanna go through all the existing users

50
00:02:37,080 --> 00:02:39,410
and add list items for every user,

51
00:02:39,410 --> 00:02:42,870
and we could do this with a for of loop.

52
00:02:42,870 --> 00:02:44,770
So with the for keyword,

53
00:02:44,770 --> 00:02:47,563
and then loop through all the users like this.

54
00:02:48,930 --> 00:02:49,950
That's what you learned

55
00:02:49,950 --> 00:02:53,060
in the control structures course section

56
00:02:53,060 --> 00:02:57,300
and it works exactly the same here in NodeJS

57
00:02:57,300 --> 00:03:00,010
because, and I can't emphasize this enough,

58
00:03:00,010 --> 00:03:03,760
NodeJS, in the end, is just regular JavaScript.

59
00:03:03,760 --> 00:03:06,460
So what you learned for regular JavaScript

60
00:03:06,460 --> 00:03:10,483
also regarding loops and if statements also works here.

61
00:03:11,600 --> 00:03:14,090
So with that, we go through all the users

62
00:03:14,090 --> 00:03:16,260
in this existing users array.

63
00:03:16,260 --> 00:03:19,200
And we can now update the response data array

64
00:03:19,200 --> 00:03:24,200
for every user simply by concatenating a string to it

65
00:03:24,270 --> 00:03:27,680
with that += shortcut operator, for example,

66
00:03:27,680 --> 00:03:29,090
which is just a short form

67
00:03:29,090 --> 00:03:32,437
for saying responseData equals responseData +.

68
00:03:33,630 --> 00:03:36,810
We can shorten this to save some space

69
00:03:36,810 --> 00:03:38,490
and write it like this.

70
00:03:38,490 --> 00:03:40,310
And then we add a new string

71
00:03:40,310 --> 00:03:42,350
to this existing string.

72
00:03:42,350 --> 00:03:43,900
At the moment, the existing string

73
00:03:43,900 --> 00:03:46,420
just has the opening unordered list tag.

74
00:03:46,420 --> 00:03:49,730
Now I also want to add a list item

75
00:03:49,730 --> 00:03:53,420
with opening and closing list item tags.

76
00:03:53,420 --> 00:03:55,650
And between those list item tags,

77
00:03:55,650 --> 00:03:59,653
I now wanna have my user data that I got here.

78
00:04:00,540 --> 00:04:04,440
And user will be a single item in this user's array,

79
00:04:04,440 --> 00:04:06,230
hence it will just be a string,

80
00:04:06,230 --> 00:04:08,810
and therefore, I can just put that string

81
00:04:08,810 --> 00:04:12,120
into that longer string between those list items

82
00:04:12,120 --> 00:04:13,853
and it should work just fine.

83
00:04:15,340 --> 00:04:18,250
And once we're done going through all that response data,

84
00:04:18,250 --> 00:04:19,120
we can, of course,

85
00:04:19,120 --> 00:04:24,120
also again concatenate the closing unordered list item

86
00:04:24,320 --> 00:04:27,823
to write semantically correct HTML code.

87
00:04:28,940 --> 00:04:31,000
And now it's this response data,

88
00:04:31,000 --> 00:04:34,663
which we can send back instead of just the existing users.

89
00:04:36,670 --> 00:04:39,560
If you do that and you quit the running server

90
00:04:39,560 --> 00:04:43,540
with Control + C and by then restarting it,

91
00:04:43,540 --> 00:04:45,730
then if you reload here,

92
00:04:45,730 --> 00:04:48,730
you should see a list with those list items.

93
00:04:48,730 --> 00:04:50,640
And whenever I store a new user

94
00:04:50,640 --> 00:04:52,300
by going back to slash

95
00:04:52,300 --> 00:04:54,540
and then adding a new user,

96
00:04:54,540 --> 00:04:58,180
if I thereafter go to /users,

97
00:04:58,180 --> 00:05:00,363
we see that user here as well.

98
00:05:01,230 --> 00:05:04,910
And now even though it's a dummy example,

99
00:05:04,910 --> 00:05:09,090
we can see what NodeJS can do for us

100
00:05:09,090 --> 00:05:14,090
what standard HTML, CSS and JavaScript in the browser can't

101
00:05:14,650 --> 00:05:17,460
because now we are accepting user input

102
00:05:17,460 --> 00:05:20,720
and we are storing that in a file at the moment.

103
00:05:20,720 --> 00:05:23,150
And we are then using that user input

104
00:05:23,150 --> 00:05:26,541
to generate dynamic HTML responses.

105
00:05:26,541 --> 00:05:29,290
The HTML page, which we get here

106
00:05:29,290 --> 00:05:30,960
is not always the same.

107
00:05:30,960 --> 00:05:35,810
Whenever a new user was added, this page changes.

108
00:05:35,810 --> 00:05:39,430
And it changes without any developer being required

109
00:05:39,430 --> 00:05:41,760
to touch an HTML file

110
00:05:41,760 --> 00:05:44,860
and add the new user manually there.

111
00:05:44,860 --> 00:05:46,890
This would not be something you can do

112
00:05:46,890 --> 00:05:49,170
if you're, for example, building an online shop

113
00:05:49,170 --> 00:05:51,520
where products might be changing all the time.

114
00:05:51,520 --> 00:05:55,040
You can't rewrite HTML pages manually.

115
00:05:55,040 --> 00:05:56,500
Now we don't need to do that

116
00:05:56,500 --> 00:05:59,410
because now we wrote some NodeJS code

117
00:05:59,410 --> 00:06:01,140
with help of Express here

118
00:06:01,140 --> 00:06:03,680
that actually reads data stored

119
00:06:03,680 --> 00:06:04,920
in some data source,

120
00:06:04,920 --> 00:06:06,200
in this case, a file,

121
00:06:06,200 --> 00:06:10,880
and then generates dynamical HTML content based on that.

122
00:06:10,880 --> 00:06:13,840
And that now shows us why we use NodeJS,

123
00:06:13,840 --> 00:06:16,333
why we sometimes need a server-side language,

124
00:06:16,333 --> 00:06:19,680
and it also shows us how NodeJS,

125
00:06:19,680 --> 00:06:23,483
especially in conjunction with Express generally works.