1
00:00:08,940 --> 00:00:16,150
Hey, everyone, in this video, we're going to talk a very, very important subject, which is, Jason,

2
00:00:16,540 --> 00:00:23,230
if you work with Web design and web development, even if you're just starting out, I'm sure you already

3
00:00:23,230 --> 00:00:24,980
heard about Jason.

4
00:00:25,360 --> 00:00:31,840
Jason is a lightweight format for storing and transporting data between applications.

5
00:00:32,020 --> 00:00:39,310
And the great thing about Jason is that all the most popular programming languages offer support for

6
00:00:39,310 --> 00:00:40,880
reading and writing data.

7
00:00:40,880 --> 00:00:49,300
And Jason, so most of the times that you work with external sources of data, so let's say you get

8
00:00:49,300 --> 00:00:51,820
data from an external API.

9
00:00:52,820 --> 00:01:01,130
Most likely that data is going to come to you as Jason and no matter which programming language you're

10
00:01:01,160 --> 00:01:02,040
working with.

11
00:01:02,330 --> 00:01:07,250
Maybe you're working with C Sharp or B or JavaScript.

12
00:01:08,170 --> 00:01:15,580
All of them, they have support for Jason, so you will be able to work with that data for JavaScript

13
00:01:15,580 --> 00:01:22,920
programmers, Jason couldn't be more convenient because it consists basically of JavaScript objects.

14
00:01:23,290 --> 00:01:28,740
In fact, Jason stands for JavaScript object notation.

15
00:01:28,870 --> 00:01:33,640
So down here I have an example of a JavaScript object.

16
00:01:35,470 --> 00:01:45,130
Which, as we know, is just a set of key value pairs, so what Jason is, is a string representation

17
00:01:45,130 --> 00:01:46,090
of an object.

18
00:01:47,120 --> 00:01:55,250
So if I had this as Jason, I would have a string that would just represent this object, but the problem

19
00:01:55,250 --> 00:02:03,260
about strings is that we already know that if we store something like this as a string, then it's going

20
00:02:03,260 --> 00:02:09,380
to be very hard to work with the data, like when we want to get the name of the employee or the birthdate

21
00:02:09,650 --> 00:02:13,670
is going to be pretty much impossible if this is stored as string.

22
00:02:13,970 --> 00:02:20,330
But we shouldn't worry about this because every programming language, we'll have methods for importing

23
00:02:20,330 --> 00:02:21,590
and exporting data.

24
00:02:21,590 --> 00:02:22,350
And Jason.

25
00:02:22,640 --> 00:02:30,410
So if we receive this thing as a string, we are going to convert it back into a JavaScript object so

26
00:02:30,410 --> 00:02:31,780
we can work with it.

27
00:02:32,090 --> 00:02:35,450
And this is what we're going to learn how to do right now.

28
00:02:35,870 --> 00:02:38,200
So let me just copy this variable.

29
00:02:38,510 --> 00:02:40,640
Let's take it to Visual Studio code.

30
00:02:41,450 --> 00:02:41,760
Right.

31
00:02:41,900 --> 00:02:44,240
So now we just created our object.

32
00:02:44,450 --> 00:02:50,960
Now, let's say we want to convert this to Jason so we can send to an external application.

33
00:02:51,650 --> 00:02:54,740
So I'm just going to create another variable called.

34
00:02:55,930 --> 00:03:05,320
Employee Jason, just so we can see it better in the console and right here, I'm going to use a method

35
00:03:05,320 --> 00:03:07,230
that comes with JavaScript.

36
00:03:07,540 --> 00:03:10,060
So you call the JSON library.

37
00:03:11,070 --> 00:03:14,040
And then we can use the string ifI.

38
00:03:15,180 --> 00:03:23,100
Method to convert this object into Jason, so the way we use it is like this we call the method and

39
00:03:23,100 --> 00:03:27,420
we just passed the object that we want to convert in this case.

40
00:03:27,420 --> 00:03:30,660
We just want to convert this object.

41
00:03:31,530 --> 00:03:31,830
Right.

42
00:03:31,860 --> 00:03:35,190
So this is going to transform this object into Jason.

43
00:03:35,790 --> 00:03:43,170
And now that we have this, let's send it to the console and let's see what is going to be printed in

44
00:03:43,170 --> 00:03:43,800
the console.

45
00:03:44,010 --> 00:03:45,420
I'm just going to save this.

46
00:03:46,510 --> 00:03:54,040
And going back to the page now, as you can see, it seems that we still have that same object, but

47
00:03:54,040 --> 00:04:01,780
now if we do a type of and try to get the type of that variable, as you can see, this data is now

48
00:04:01,780 --> 00:04:03,430
stored as a string.

49
00:04:03,730 --> 00:04:11,290
So I can't do like employee Jason and try to get the name if I do this.

50
00:04:11,500 --> 00:04:13,780
So employee Jason, that name.

51
00:04:15,040 --> 00:04:19,670
As you can see, this is returning undefined because this is not an object anymore.

52
00:04:19,910 --> 00:04:21,200
Now this is a string.

53
00:04:21,200 --> 00:04:27,530
So this is what, Jason, this is just a string representation of an object.

54
00:04:27,830 --> 00:04:31,040
So what exactly is the advantage of doing this?

55
00:04:31,250 --> 00:04:37,320
This is because every programming language that we know, they have a data type called string.

56
00:04:37,790 --> 00:04:46,730
So by storing data in a string, then this is a very lightweight formant and very easy to send to different

57
00:04:46,730 --> 00:04:50,240
applications that use different programming languages.

58
00:04:50,610 --> 00:04:55,510
If we send this to an application that's using B, it's no problem.

59
00:04:55,820 --> 00:05:03,590
We just need to use a method that is going to convert a string, which in this case is a Jason into

60
00:05:03,590 --> 00:05:08,450
a B object and the same thing for any other programming language.

61
00:05:08,750 --> 00:05:11,130
So this is why Jason is so powerful.

62
00:05:11,240 --> 00:05:13,570
Now let's see how we can do the opposite.

63
00:05:13,580 --> 00:05:20,360
So let's say we just received this, Jason, from an external source and now we need to convert it back

64
00:05:20,360 --> 00:05:23,270
to an object in order to work with it.

65
00:05:23,480 --> 00:05:31,730
So going to Visual Studio Code, we know that we have a Jason, which is basically a string, a string

66
00:05:31,730 --> 00:05:36,300
representation of an object, and this is stored inside this variable.

67
00:05:36,320 --> 00:05:39,380
So let's say we just got it from an external source.

68
00:05:39,620 --> 00:05:45,640
So now how do we convert it back into a JavaScript object for this?

69
00:05:45,650 --> 00:05:52,730
I'm going to create another one again just to make things easier when we check this variable from the

70
00:05:52,730 --> 00:05:53,320
console.

71
00:05:53,330 --> 00:05:56,930
So I'm just going to create another one called employee.

72
00:06:00,620 --> 00:06:01,580
OBD.

73
00:06:02,830 --> 00:06:07,510
Which I'm going to use to cover this string back into an object.

74
00:06:08,450 --> 00:06:16,460
So we are going to use the Jason Library again, and now the name of the method is pass, so by using

75
00:06:16,460 --> 00:06:17,060
the pass.

76
00:06:18,090 --> 00:06:21,900
JavaScript is going to convert this string into an object.

77
00:06:24,290 --> 00:06:26,510
So inside here, I'm just.

78
00:06:27,480 --> 00:06:30,570
Going to pass the Jason that I want to convert.

79
00:06:34,820 --> 00:06:37,760
Now, let's do consolidate log for this variable.

80
00:06:46,110 --> 00:06:52,470
So as you can see now, we have this converted back into an object, if we do type of.

81
00:06:54,640 --> 00:07:01,690
Now we can see that it's not a string anymore, now it's an object, and since this is an object, we

82
00:07:01,690 --> 00:07:03,190
can get its properties.

83
00:07:03,190 --> 00:07:11,780
So we could just do like employee object that name and we can easily work with this objects, properties.

84
00:07:12,280 --> 00:07:19,540
Please note that not only objects can be converted into JSON, but we can do the same thing with arrays.

85
00:07:19,900 --> 00:07:27,810
So down here I've just included an example, which is just an array, which is a list of values here.

86
00:07:27,820 --> 00:07:31,240
We don't have key value pairs, we just have an array.

87
00:07:31,480 --> 00:07:36,610
And the same way we can use the string Jeffie to convert it into a Jason.

88
00:07:36,640 --> 00:07:39,700
So let's do it quickly in the console just so we can see.

89
00:07:40,600 --> 00:07:42,790
So now we just have an array.

90
00:07:45,030 --> 00:07:52,890
And if I do this so I'm going to string defying this array or convert into Jason.

91
00:07:55,950 --> 00:08:03,420
So if I do this, as you can see, it's just converted into a string, so it works the same way as an

92
00:08:03,420 --> 00:08:08,070
object, actually, let's remember that if we do type of.

93
00:08:10,610 --> 00:08:20,630
Group A, let's remember that JavaScript treats arrays as objects, so maybe when you receive data from

94
00:08:20,630 --> 00:08:27,440
an external source, maybe it's going to be an array or an object, or maybe it's just going to be multidimensional

95
00:08:27,800 --> 00:08:33,510
arrays mixed with object, which is what is most common out there.

96
00:08:33,530 --> 00:08:41,930
So this is really, really cool because now we can start sending requests to API and start working with

97
00:08:41,930 --> 00:08:42,890
external data.

98
00:08:43,190 --> 00:08:49,400
This is what we are going to do in the next section when we learn how to work with Ajax.

99
00:08:50,600 --> 00:08:56,210
I'm just going to show you a very quick example here of what we are going to work with.

100
00:08:56,480 --> 00:09:01,130
So I'm going to visit a website, which is the trivia API.

101
00:09:02,860 --> 00:09:03,610
Here it is.

102
00:09:05,640 --> 00:09:14,820
Open trivia DBI and what this is, is just a database of trivia questions and answers, so let's just

103
00:09:14,820 --> 00:09:16,730
get a quick example here.

104
00:09:16,740 --> 00:09:24,060
Let's get one question and then you have multiple categories like entertainment, science, sports.

105
00:09:24,600 --> 00:09:25,200
Let's.

106
00:09:26,640 --> 00:09:37,610
Let's select history and let's just leave all the rest as default and let's generate an API euro.

107
00:09:37,830 --> 00:09:42,960
So as you can see, this is the the URL to call this API.

108
00:09:43,200 --> 00:09:51,840
And what happens is if we use this with JavaScript and Ajax, this is what we are going to have in return.

109
00:09:51,870 --> 00:09:53,430
So I'm just going to call it now.

110
00:09:53,580 --> 00:09:58,830
And as you can see, what this is going to return to us is a JSON.

111
00:09:59,070 --> 00:10:05,460
So this is a trivia question with the answers so we can create a very cool.

112
00:10:06,490 --> 00:10:13,710
Game using JavaScript, and this is what we are going to do in the next section when we have this,

113
00:10:14,260 --> 00:10:19,690
we just need to convert into an object and then we can work with all the properties.

114
00:10:20,700 --> 00:10:27,630
We have the category type difficulty, we have the actual question, and every time we call this you

115
00:10:27,630 --> 00:10:31,790
are, we are going to have a different question, so I'm going to load it again.

116
00:10:32,100 --> 00:10:37,890
So now, as you can see, we have a different question so we can create a very cool game that's going

117
00:10:37,890 --> 00:10:41,930
to get random questions from this database.

118
00:10:42,270 --> 00:10:45,670
So this is what we're going to do in the next section.

119
00:10:45,990 --> 00:10:49,670
So that was all I wanted to talk about, Jason, for the moment.

120
00:10:49,680 --> 00:10:51,180
I'll see you in the next video.