1 00:00:00,200 --> 00:00:01,070 Hello guys. 2 00:00:01,070 --> 00:00:02,180 Good to see you back. 3 00:00:02,180 --> 00:00:05,180 So finally we are in my Visual Studio Code editor. 4 00:00:05,180 --> 00:00:09,200 So as you can see in my current working directory there is two file. 5 00:00:09,500 --> 00:00:14,570 First one is index dot HTML and second one is first dot Json file. 6 00:00:14,570 --> 00:00:15,470 Yes. 7 00:00:15,470 --> 00:00:19,490 To create a Json file we need to use dot json extension. 8 00:00:19,760 --> 00:00:22,190 So let's talk about the Json file. 9 00:00:22,220 --> 00:00:25,970 As you can see our Json file start with curly braces. 10 00:00:26,000 --> 00:00:32,150 As I told you, to create a Json object or store a data, we need to use curly braces. 11 00:00:32,180 --> 00:00:36,230 Then inside the curly braces we have property and value. 12 00:00:36,470 --> 00:00:40,610 And if you notice you can see all the properties are in double quotes. 13 00:00:40,610 --> 00:00:44,510 So our first property is name and its data type is string. 14 00:00:44,630 --> 00:00:49,160 Our second property is age and it is data type is number. 15 00:00:49,670 --> 00:00:54,140 Our third property is married and its data type is boolean. 16 00:00:54,140 --> 00:00:56,900 So that's why here I type false. 17 00:00:57,290 --> 00:00:59,180 Our fourth data type is null. 18 00:00:59,390 --> 00:01:02,000 So that's why here I type null value. 19 00:01:02,450 --> 00:01:05,960 And if you do not pass any value by default it is going to take null. 20 00:01:06,230 --> 00:01:07,820 Our second data type is array. 21 00:01:08,210 --> 00:01:15,170 That's why here I store multiple results hobby dance soccer, cricket. 22 00:01:15,200 --> 00:01:18,770 And our last data type is object data type. 23 00:01:18,950 --> 00:01:22,130 To create object data type we need to use curly braces. 24 00:01:22,130 --> 00:01:27,500 And inside the curly braces here we use some other properties pin country and state. 25 00:01:27,680 --> 00:01:32,540 So this is the Json data that I am going to use in our JavaScript. 26 00:01:32,540 --> 00:01:37,580 Basically Json is used to send data from the server to client. 27 00:01:37,760 --> 00:01:41,390 That's why without server we cannot run Json properly. 28 00:01:41,750 --> 00:01:43,010 Yes, you can run. 29 00:01:43,010 --> 00:01:46,700 First you need to convert JavaScript object into a Json data. 30 00:01:46,730 --> 00:01:48,800 Then you can run it without server. 31 00:01:48,800 --> 00:01:54,140 But this is not a good process because in real life we do not use like that. 32 00:01:54,170 --> 00:01:59,240 Now I want to use this Json data in our index.html file. 33 00:01:59,240 --> 00:02:02,060 So let's jump into the index dot HTML file. 34 00:02:02,450 --> 00:02:05,570 Here you can see inside the script tag. 35 00:02:05,600 --> 00:02:08,570 Here I create a variable name request. 36 00:02:08,930 --> 00:02:12,860 This variable is going to send a new Http request to our server. 37 00:02:13,040 --> 00:02:15,650 Then our variable request dot. 38 00:02:15,680 --> 00:02:20,990 Here I use open function and in our open function we have to call two methods get and post. 39 00:02:20,990 --> 00:02:23,060 And here I use get method. 40 00:02:23,300 --> 00:02:27,980 Then here we parse the source file means first dot Json. 41 00:02:28,190 --> 00:02:31,910 This open function going to open the Json file from the server. 42 00:02:31,940 --> 00:02:38,300 Then we use request dot send function and inside the round braces I provide null argument. 43 00:02:38,420 --> 00:02:42,530 Here we use null value because here we do not send any value to our server. 44 00:02:42,530 --> 00:02:45,320 Just want to get the Json file from the server. 45 00:02:45,320 --> 00:02:49,520 Now from our server it is going to return a text response. 46 00:02:49,910 --> 00:02:57,200 Then after get this text response, we need to convert the text response into a JavaScript object. 47 00:02:57,200 --> 00:03:02,300 For that we need to use a function which is parse. 48 00:03:02,300 --> 00:03:05,210 So here I create a variable var data. 49 00:03:05,240 --> 00:03:12,320 Data means what we get from the Json file equal to and here I use a function named json dot parse. 50 00:03:12,350 --> 00:03:18,500 Then inside the round braces request means this variable request dot response text. 51 00:03:18,500 --> 00:03:23,240 Because as I told you, all the Json data are in text format. 52 00:03:23,270 --> 00:03:28,490 This function is going to convert this Json data into a object and store it data variable. 53 00:03:28,520 --> 00:03:34,220 Now if I print this data variable in our console dot log then we can read the data. 54 00:03:34,520 --> 00:03:37,760 So let's open the file without server. 55 00:03:37,790 --> 00:03:40,820 Here you can see I do not run my life server. 56 00:03:40,820 --> 00:03:43,910 So I'm going to open this HTML file from the directory. 57 00:03:43,910 --> 00:03:48,710 So if I open this HTML file from the directory, as you can see in my screen, it's shown nothing. 58 00:03:48,710 --> 00:03:54,470 But if I show you my console and show you console section here you can see a lot of errors. 59 00:03:54,830 --> 00:03:59,090 Because to run XML Http request we need servers. 60 00:03:59,090 --> 00:04:01,670 So let's back to the Visual Studio Code. 61 00:04:01,790 --> 00:04:05,210 Now I'm going to run the same file with Live Server. 62 00:04:05,450 --> 00:04:08,030 So here you can see the option go live. 63 00:04:08,060 --> 00:04:09,890 After press go live. 64 00:04:09,890 --> 00:04:12,500 It's going to open my file from the server. 65 00:04:12,590 --> 00:04:17,780 Now if I show you my console section here you can see the object. 66 00:04:17,810 --> 00:04:26,900 If I open this object now you can see all the data from our object license, null address, hobby name, 67 00:04:26,900 --> 00:04:30,200 etcetera, marriage status, all of these. 68 00:04:30,590 --> 00:04:37,670 Now we convert the Json data into a object so we can access all of these properties one by one. 69 00:04:37,670 --> 00:04:41,330 Also you can perform mathematical calculation and anything. 70 00:04:41,330 --> 00:04:43,370 So this is how we use Json. 71 00:04:43,670 --> 00:04:50,750 And if you want to access the data and particularly you want to print the name, just you need to type 72 00:04:50,780 --> 00:04:54,950 data dot property name which is name. 73 00:04:55,250 --> 00:04:59,210 If I save this file and back to my browser. 74 00:04:59,910 --> 00:05:00,120 Here. 75 00:05:00,120 --> 00:05:03,810 You can see in my console now it's print only the name add one. 76 00:05:04,410 --> 00:05:09,990 As I told you, now it's completely a JavaScript object so you can do anything with it. 77 00:05:10,320 --> 00:05:13,920 Just you need to remember Json dot parse function. 78 00:05:13,920 --> 00:05:17,810 Convert Json text data into a JavaScript object. 79 00:05:17,820 --> 00:05:18,900 At the opposite way. 80 00:05:18,900 --> 00:05:25,860 If you want to convert JavaScript object into a Json text data, in that case you need to use json dot 81 00:05:25,860 --> 00:05:27,210 Stringify method. 82 00:05:27,210 --> 00:05:28,410 Let me show you. 83 00:05:29,160 --> 00:05:35,340 So here I'm going to declare another variable where and our variable name is obj. 84 00:05:35,910 --> 00:05:39,690 It's an object object equal to. 85 00:05:39,810 --> 00:05:41,100 Inside the curly braces. 86 00:05:41,100 --> 00:05:45,000 Our first property is name name. 87 00:05:45,780 --> 00:05:47,580 Inside the double quotes add one. 88 00:05:48,060 --> 00:05:50,790 Our second property is age. 89 00:05:51,720 --> 00:05:52,800 Inside the double quotes. 90 00:05:52,830 --> 00:05:54,870 Otherwise I'm going to use numeric value. 91 00:05:54,870 --> 00:05:57,240 So we don't need double quotes 30. 92 00:05:57,990 --> 00:06:00,540 And our third value is city. 93 00:06:02,070 --> 00:06:03,090 City. 94 00:06:03,840 --> 00:06:07,830 And inside the double quotes city is New York. 95 00:06:11,790 --> 00:06:13,800 So this is a JavaScript object. 96 00:06:13,830 --> 00:06:18,720 Now we need to convert this JavaScript object into a Json string. 97 00:06:18,990 --> 00:06:28,770 For that I'm going to declare another variable where and our variable name is my Json. 98 00:06:30,870 --> 00:06:36,960 And as I told you, to convert JavaScript object into a Json object into a Json data, we need to use 99 00:06:36,960 --> 00:06:39,060 json dot Stringify method. 100 00:06:39,150 --> 00:06:43,590 So I'm going to type json dot stringify. 101 00:06:43,800 --> 00:06:50,250 Then inside the round braces we need to pass the object name, which is obj and semicolon two in this 102 00:06:50,250 --> 00:06:50,670 line. 103 00:06:50,790 --> 00:06:53,730 And now I'm going to print this Json data. 104 00:06:53,760 --> 00:06:57,030 Otherwise text in my body tag. 105 00:06:57,030 --> 00:06:59,580 So here I'm going to create a div tag. 106 00:06:59,850 --> 00:07:02,080 Now I'm going to take a paragraph tag p. 107 00:07:02,580 --> 00:07:07,410 And I'm going to assign a ID to this paragraph ID demo. 108 00:07:08,490 --> 00:07:09,390 Then. 109 00:07:10,530 --> 00:07:15,390 And now I'm going to use Dom to print the Json data in my paragraph tag. 110 00:07:15,930 --> 00:07:26,760 So here I'm going to type document dot get element by id inside the round braces or ID name is demo. 111 00:07:28,830 --> 00:07:41,100 Dot I want to set inner HTML inner HTML equal to my Json and semicolon to in this line. 112 00:07:41,610 --> 00:07:44,130 So if I save this file and show you my browser. 113 00:07:44,130 --> 00:07:52,590 As you can see, it's not working because we need to move this script tag below then paragraph tag. 114 00:07:52,590 --> 00:07:59,400 So I'm going to cut this portion, and I'm going to move it below the paragraph tag and save this file 115 00:07:59,400 --> 00:08:00,060 again. 116 00:08:00,060 --> 00:08:03,420 Now if I show you my browser you can see the result. 117 00:08:03,420 --> 00:08:06,510 As you can see it, print the text data as it is. 118 00:08:06,540 --> 00:08:12,060 And if you notice, you can see it's a Json data because it is inside the curly braces. 119 00:08:12,060 --> 00:08:16,020 Also also for properties, name it use dual quotes. 120 00:08:16,020 --> 00:08:19,080 So this is how we can use Json in JavaScript. 121 00:08:19,110 --> 00:08:22,200 We are going to learn more about it in our upcoming tutorials. 122 00:08:22,200 --> 00:08:28,620 So don't worry when we learn about Essex and rest API json play the key role. 123 00:08:28,620 --> 00:08:30,150 So thanks for watching this video. 124 00:08:30,150 --> 00:08:31,890 Stay tuned for our next tutorial.