1
00:00:02,600 --> 00:00:05,760
Now the format of the data is really important,

2
00:00:05,780 --> 00:00:10,850
you exchange data between your client side and the server side in a certain format and technically,

3
00:00:11,210 --> 00:00:12,690
there are no restrictions,

4
00:00:12,710 --> 00:00:20,180
you can send plain text, you can send HTML markup, you can send XML markup, you can send csv

5
00:00:20,180 --> 00:00:23,260
files or as you typically do,

6
00:00:23,270 --> 00:00:27,230
you use this data format which is called JSON.

7
00:00:27,320 --> 00:00:31,430
JSON looks like this, if you click on response, you'll see the raw response

8
00:00:31,490 --> 00:00:35,980
and JSON stands for Javascript Object Notation.

9
00:00:36,140 --> 00:00:42,530
Indeed as you can tell, this does looks a lot like Javascript objects in an array and JSON is derived

10
00:00:42,530 --> 00:00:47,970
from Javascript data types, from arrays and objects in Javascript to be precise,

11
00:00:48,020 --> 00:00:51,950
it's almost the same but there are a couple of differences. In JSON

12
00:00:51,950 --> 00:00:57,800
you can only store data, you can't have methods in there and you can't send functions to a server.

13
00:00:57,800 --> 00:01:02,240
In addition, your property names have to be wrapped between double quotes,

14
00:01:02,330 --> 00:01:05,500
it must be double quotes and it has to be wrapped,

15
00:01:05,570 --> 00:01:08,780
so userId without quotes would not be allowed.

16
00:01:08,780 --> 00:01:10,970
It also would not be allowed with single quotes,

17
00:01:10,970 --> 00:01:13,840
you need to double quotes. Now as values,

18
00:01:13,850 --> 00:01:19,950
you can use numbers, booleans, strings, other objects or arrays, that's supported,

19
00:01:20,000 --> 00:01:24,900
null is also allowed and then, this is basically it.

20
00:01:24,900 --> 00:01:29,430
This is how the data looks like, you can also have nested objects and nested arrays,

21
00:01:29,430 --> 00:01:34,650
this is all allowed and this is how the data is transferred between the two ends.

22
00:01:35,310 --> 00:01:38,270
So here we received data in this JSON format,

23
00:01:38,280 --> 00:01:44,370
it would now be nice to parse that from the response so that we can actually output it on the page at

24
00:01:44,370 --> 00:01:47,140
a later point of time. Now for that

25
00:01:47,140 --> 00:01:51,380
let's see, how can we get to the response here when we send a request?

26
00:01:51,460 --> 00:01:57,640
We have to wait for the load event which is fired automatically once the data is loaded,

27
00:01:57,670 --> 00:02:05,740
so once the request completed and we do so by setting up an event listener basically, however xhr does

28
00:02:05,740 --> 00:02:08,400
not always support an event listener,

29
00:02:08,470 --> 00:02:10,600
older browsers don't support that,

30
00:02:10,600 --> 00:02:16,000
I think Internet Explorer does not support it at all and therefore the more common way of listening

31
00:02:16,000 --> 00:02:23,960
to that is to assign a function to the event handler, to xhr.onLoad.

32
00:02:24,360 --> 00:02:30,550
To this property, you assign a function and you saw this syntax in the events module where I showed you

33
00:02:30,550 --> 00:02:35,860
that this is an alternative to adding event listeners, here we should use that because add event listener

34
00:02:35,860 --> 00:02:37,610
is not broadly supported

35
00:02:37,890 --> 00:02:41,340
and here we can connect a function, written in any syntax you want,

36
00:02:41,350 --> 00:02:47,250
here I'm using the function expression syntax, that handles the incoming response.

37
00:02:47,260 --> 00:02:53,710
Now we don't receive the response as an argument here however, instead we can extract it on the 

38
00:02:53,740 --> 00:02:55,320
xhr.response

39
00:02:55,360 --> 00:02:56,250
key.

40
00:02:56,550 --> 00:03:07,100
Now let's console log xhr.response here and see if that works. If we tweak the code like this and we

41
00:03:07,100 --> 00:03:10,080
then reload here, this looks pretty good,

42
00:03:10,080 --> 00:03:14,610
was very fast because it's a fast API but this looks pretty decent to me,

43
00:03:14,640 --> 00:03:16,020
this is the output

44
00:03:16,140 --> 00:03:20,270
JSON data which was fetched from the server and it's important.

45
00:03:20,280 --> 00:03:23,710
This is not a native Javascript array with which we could work,

46
00:03:23,730 --> 00:03:25,240
it's JSON data.

47
00:03:25,530 --> 00:03:31,240
If you would try to store that list of posts from 

48
00:03:31,240 --> 00:03:38,620
xhr.response, you would not be able to for example push a new element there. If you tried to do that and

49
00:03:38,620 --> 00:03:39,460
you reload,

50
00:03:39,460 --> 00:03:42,260
you'll see you get an error because 

51
00:03:42,280 --> 00:03:49,410
xhr.response gives you JSON data and not an array you can use like that. In order to use it,

52
00:03:49,410 --> 00:03:58,050
you have to convert the JSON data to Javascript types, to Javascript arrays and objects and so on and

53
00:03:58,050 --> 00:04:01,290
Javascript has a built-in helper that helps you with that,

54
00:04:01,290 --> 00:04:08,550
it has a built-in JSON constructor function or class which has a couple of static helper methods, parse

55
00:04:08,640 --> 00:04:15,330
and stringify, stringify helps you convert Javascript code or Javascript objects and arrays

56
00:04:15,330 --> 00:04:21,610
to JSON data and parse helps to convert JSON data back to Javascript.

57
00:04:21,630 --> 00:04:25,840
So here we can parse the xhr.response

58
00:04:26,070 --> 00:04:33,380
and now if we console log list of posts, we should have a Javascript array with which we could work.

59
00:04:33,450 --> 00:04:39,150
So if we now save that and we reload, this looks better, this now really is a Javascript array and you

60
00:04:39,150 --> 00:04:42,820
see for example the double quotes around the property names are gone,

61
00:04:42,840 --> 00:04:47,310
this is now really Javascript data with which we can work. Now important,

62
00:04:47,310 --> 00:04:51,140
you can manually parse it like this and I wanted to show you this

63
00:04:51,150 --> 00:04:53,250
JSON helper object,

64
00:04:53,280 --> 00:04:57,950
actually there is a little convenience built into the XMLHttpRequest object.

65
00:04:58,170 --> 00:05:05,600
If you set xhr.response type here to JSON and it has to be exactly this term,

66
00:05:05,790 --> 00:05:09,210
then this will automatically be parsed for you,

67
00:05:09,210 --> 00:05:16,830
so then if you would duplicate this line, you could store the response without manually parsing it because

68
00:05:16,830 --> 00:05:19,140
it will be parsed behind the scenes for you

69
00:05:19,140 --> 00:05:25,680
if you add this extra configuration. So now with this code if I reload, we'll have the same result as with

70
00:05:25,680 --> 00:05:27,090
the manual parsing.

71
00:05:27,090 --> 00:05:28,780
It's important to be aware of that

72
00:05:28,800 --> 00:05:34,250
JSON parse helper functionality though because often you will need that, not always

73
00:05:34,290 --> 00:05:36,390
you can preconfigure it like this.

74
00:05:36,390 --> 00:05:41,350
So now we got this list of posts, outputting it in the console is nice,

75
00:05:41,370 --> 00:05:44,400
how can we output it in the index.html file?

76
00:05:44,430 --> 00:05:50,400
Well there we get the unordered list with a class of posts and there I want to output and I get this

77
00:05:50,400 --> 00:05:54,330
template which holds a list item which I want to use for outputting it.

78
00:05:54,350 --> 00:06:05,020
Now to do that, we can add a new constant here, list element for example and get access to it with document

79
00:06:05,950 --> 00:06:12,940
query selector and then select by the posts class because we'll only have one element with that class

80
00:06:12,970 --> 00:06:19,990
on the page and get access to our template here and we might want to add an ID to that,

81
00:06:19,990 --> 00:06:22,260
we could also select it by just a template tag

82
00:06:22,270 --> 00:06:25,780
but here I'll give it an ID of single post,

83
00:06:25,790 --> 00:06:27,210
that's totally up to you though

84
00:06:28,590 --> 00:06:41,410
and now we can select this template, so post template with document get element by ID, single post and

85
00:06:41,410 --> 00:06:50,920
now we want to add a couple of posts or this list of posts to our unordered list or maybe turn all

86
00:06:50,920 --> 00:06:52,090
these posts here,

87
00:06:52,090 --> 00:06:59,470
all these posts into list elements and to do that, we can loop through our list of posts,

88
00:06:59,470 --> 00:07:02,260
so for and now we'll have a problem,

89
00:07:02,260 --> 00:07:05,070
can we loop for our list of posts here?

90
00:07:05,110 --> 00:07:09,350
We can't because they're only available here inside of this anonymous function.

91
00:07:09,370 --> 00:07:12,320
This is when the response is there,

92
00:07:12,340 --> 00:07:17,830
this happens asynchronously and as you learned, Javascript will not block code execution, it will continue

93
00:07:17,830 --> 00:07:23,590
with these lines even though the response might not be there yet and therefore actually, we should do

94
00:07:23,590 --> 00:07:29,350
our looping logic here inside of this function because that's the only place where we have the guarantee

95
00:07:29,350 --> 00:07:33,300
that the posts are available, hence I will now also move that up there,

96
00:07:33,310 --> 00:07:41,800
my two selections and now loop through my posts with const post of list of posts here inside of that

97
00:07:41,800 --> 00:07:43,300
anonymous function.

98
00:07:43,330 --> 00:07:50,750
Now the goal is to replicate the template for every post and add it to the list element here.

99
00:07:50,990 --> 00:07:59,140
For that, we can get access to our post element with document import node and then we want to import the

100
00:07:59,380 --> 00:08:08,390
postTemplate.content and pass through here to make a deep clone and on this post element,

101
00:08:08,390 --> 00:08:12,570
I now want to select the h2 tag which we have in there,

102
00:08:12,590 --> 00:08:15,320
we also have a paragraph in there thereafter

103
00:08:15,530 --> 00:08:20,990
and then here, set the text content equal to post.

104
00:08:20,990 --> 00:08:26,450
and now if we have a look, we see that every post which we fetched has a title property and then a body

105
00:08:26,450 --> 00:08:28,550
property with some dummy text.

106
00:08:28,550 --> 00:08:34,490
So here I want to set this equal to title and maybe to uppercase to convert it all to uppercase characters

107
00:08:35,510 --> 00:08:42,470
and also post el query selector for the paragraph and there, I want to set text content equal to 

108
00:08:42,610 --> 00:08:43,510
post.body,

109
00:08:43,670 --> 00:08:45,000
just like that.

110
00:08:45,190 --> 00:08:53,410
Thereafter we can reach out to the list element and then append our post element like this. If we do

111
00:08:53,410 --> 00:08:58,020
that and we post this, let's reload and see whether it works and that looks quite good,

112
00:08:58,030 --> 00:09:02,680
we rendered a bunch of posts here in our list of posts, quite a lot of them

113
00:09:02,710 --> 00:09:10,060
but that's OK. So this is now how we can also utilize the data we fetched and output it, not just in Javascript

114
00:09:10,600 --> 00:09:11,820
but also on the screen.