1 00:00:00,130 --> 00:00:06,540 In this lesson, we are going to be looking at Jason and using Jason data directly within our JavaScript 2 00:00:06,540 --> 00:00:06,850 code. 3 00:00:07,140 --> 00:00:14,160 So let's go ahead and create another James file called this one app to James and then create that new 4 00:00:14,160 --> 00:00:16,730 file within the same directory. 5 00:00:16,740 --> 00:00:20,750 And it was just save it as app to Dot James. 6 00:00:21,060 --> 00:00:27,840 I've also still got the editor opened on the left hand side and as well I've got my browser window opened 7 00:00:27,840 --> 00:00:33,900 on the right hand side going over to the index page that's serving up the app to us. 8 00:00:34,530 --> 00:00:39,190 And there's more information available about Jason at the Mozilla Developer Network. 9 00:00:39,540 --> 00:00:46,710 So Jason contains data and it's really easy to pass that data and make use of it within a JavaScript. 10 00:00:46,950 --> 00:00:55,860 JSON is short for JavaScript object notation and converting values from JSON to JavaScript allows you 11 00:00:55,860 --> 00:00:58,260 to really easily use the data. 12 00:00:58,860 --> 00:01:03,030 There are some key differences within JavaScript and Jason. 13 00:01:03,360 --> 00:01:09,870 So we saw in the previous lessons that we can create objects and arrays within the property names of 14 00:01:09,870 --> 00:01:15,670 the objects they need to be double coded strings and trailing commas are forbidden. 15 00:01:15,900 --> 00:01:22,470 So if, for instance, you have a trailing comma and a trailing comma is something like where you've 16 00:01:22,470 --> 00:01:27,130 got a person and let's just do a very simple one here. 17 00:01:29,400 --> 00:01:35,820 So if we have a trailing comma within JavaScript, this person is still going to be OK. 18 00:01:36,360 --> 00:01:42,770 But because we do have this trailing comments, expecting another value with the comma separation. 19 00:01:42,960 --> 00:01:46,380 So that's where we're not able to add in the trailing comma. 20 00:01:46,380 --> 00:01:50,180 So that one's going to cause a problem if it's adjacent data. 21 00:01:50,370 --> 00:01:56,050 There's a number of places that you can go to lente JSON data to make sure that it's valid. 22 00:01:56,070 --> 00:01:56,640 Jason, 23 00:02:00,600 --> 00:02:07,410 you can type into the search engine, Jason Lente and go to any one of the ones that show up and select 24 00:02:07,410 --> 00:02:15,090 your JSON data copy, paste it into the validator and you'll see that it's going to throw an error because 25 00:02:15,090 --> 00:02:16,710 we have that excess comma. 26 00:02:16,890 --> 00:02:20,790 But once we remove the comma, we have once again valid JSON. 27 00:02:21,180 --> 00:02:27,900 So that is important to have the not have the trailing end as well, to have the double quotes around 28 00:02:27,900 --> 00:02:28,890 the property names. 29 00:02:29,160 --> 00:02:35,100 So even though this will work within JavaScript, it's not going to work within as valid. 30 00:02:35,100 --> 00:02:35,720 Jason. 31 00:02:36,030 --> 00:02:37,350 So it's always a good idea. 32 00:02:37,500 --> 00:02:43,410 Even when you're writing just JavaScript, if you do work a lot with Jason to make sure that it is properly 33 00:02:43,410 --> 00:02:49,560 structured JSON, it's not going to hurt the JavaScript and it'll help you familiarize yourself a lot 34 00:02:49,560 --> 00:02:52,310 more with how to construct JSON data. 35 00:02:52,620 --> 00:02:55,800 So leading zeros are prohibited within numbers. 36 00:02:56,040 --> 00:03:02,670 So that means that if we have no value and we have a leading zero. 37 00:03:05,700 --> 00:03:14,040 And I'll just move this to the next slide, we'll do a wrap there and then I'll cancel out whatever 38 00:03:14,040 --> 00:03:16,340 we've got per person within JavaScript. 39 00:03:16,650 --> 00:03:18,330 So go back to the console. 40 00:03:18,540 --> 00:03:19,160 That's fine. 41 00:03:19,170 --> 00:03:21,120 It's still output's it as one. 42 00:03:21,480 --> 00:03:29,520 But if I was to take this JavaScript object and pasted in here and do a validate JSON, it's going to 43 00:03:29,520 --> 00:03:34,440 throw an error because it's expecting that this value is not going to have the leading zeros. 44 00:03:37,030 --> 00:03:45,410 Also, decimal point must be followed by at least one digit and nine and infinity are unsupported. 45 00:03:45,730 --> 00:03:50,920 So those are the key differences between JavaScript and Jason. 46 00:03:53,190 --> 00:03:59,730 They've got some more information on the breakdown of what type of values you can have so you can have 47 00:04:00,030 --> 00:04:05,910 a boolean value, you can have NUL, you can have a number, a string, an object or an array. 48 00:04:06,150 --> 00:04:10,380 So those are also the common ones that we're using within JavaScript as well. 49 00:04:11,850 --> 00:04:17,160 There's also methods that are listed in here and we're going to look at more of those in detail. 50 00:04:17,160 --> 00:04:20,130 And coming up by Jason Parsons's on String OWFI. 51 00:04:20,910 --> 00:04:28,620 So let's go ahead and copy this information and create JSON file and then bring that into our JavaScript. 52 00:04:28,950 --> 00:04:33,730 So as long as it's got a G.S. extension, this is going to run as a JavaScript file. 53 00:04:34,020 --> 00:04:39,630 So in some cases, you might see that somebody might indicate that there's an object and they have a 54 00:04:39,650 --> 00:04:44,370 G.S., but they're still defining the object value in a true JSON file. 55 00:04:44,550 --> 00:04:52,770 You'd be using the extension dict GSO N and just having the JSON at data sitting within there and then 56 00:04:52,770 --> 00:04:58,650 that would be valid JSON data so that you could access that data file from any. 57 00:05:00,200 --> 00:05:03,930 Scripting language, and in this case, we are going to be using JavaScript. 58 00:05:04,280 --> 00:05:10,940 So let's go ahead and create a new file and copy the JSON data into the new file. 59 00:05:11,300 --> 00:05:15,850 And then I'm going to save this as a JSON file. 60 00:05:16,820 --> 00:05:22,940 So we'll call it G one JSON and that's our JSON file. 61 00:05:23,030 --> 00:05:26,680 And we're going to also now access this using JavaScript. 62 00:05:27,140 --> 00:05:30,620 So instead of defining the value of person. 63 00:05:31,920 --> 00:05:38,010 And looking at the value of person, we're going to make a fetch request to the Jason file and then 64 00:05:38,010 --> 00:05:43,780 return that value as usable information into our JavaScript. 65 00:05:43,800 --> 00:05:51,960 So let's go ahead and make a fetch and let's clear that out and go back into here and we'll create a 66 00:05:51,960 --> 00:05:55,900 function that's going to call it my Jason. 67 00:05:57,120 --> 00:06:03,960 And what this function will do is this will make a fetch request and the request is going to go to the 68 00:06:03,960 --> 00:06:05,010 Web you URL. 69 00:06:05,220 --> 00:06:11,010 And in this case, wherever we've got our JSON data is going to be the euro that we're looking for. 70 00:06:11,190 --> 00:06:13,700 So that's the one Jason file. 71 00:06:15,900 --> 00:06:20,970 And because it's on the same directly, we're making a fetch request to read up on fetch. 72 00:06:20,970 --> 00:06:26,190 There's more information Musila Developer Network using fetch and it's got an example here. 73 00:06:26,370 --> 00:06:28,980 So Fetch does work off of promises. 74 00:06:29,250 --> 00:06:34,260 So the idea for a fetch is that we make a request to ever the endpoint is so in this case, it's going 75 00:06:34,260 --> 00:06:41,910 to be the Jason file where we're turning back a response from that endpoint and the response it if it 76 00:06:41,910 --> 00:06:49,830 is JSON data, there's also a method that is called JSON and this is a method that defines the body 77 00:06:49,980 --> 00:06:54,690 mixin and basically it Tranz forms the JSON. 78 00:06:54,810 --> 00:06:59,190 It it's expecting JSON, it transforms it into usable data object. 79 00:06:59,200 --> 00:07:04,470 So returning back to the JSON into adjacent format and it's not going to come back as a string. 80 00:07:04,470 --> 00:07:07,650 If you're using the JSON method, it returns it back as an object. 81 00:07:07,770 --> 00:07:10,830 And this then is a usable object in JavaScript. 82 00:07:11,100 --> 00:07:13,410 So reading return back as data. 83 00:07:13,590 --> 00:07:16,370 And then here in this example, they're looking at the data. 84 00:07:16,380 --> 00:07:22,170 So we're going to do the exact same thing, so pressing and doing a fetch request to the euro. 85 00:07:22,440 --> 00:07:28,860 And then once we make the connection, we're going to wait for the response object and then within the 86 00:07:28,860 --> 00:07:35,940 response, using the function arrow notation, taking that response object and then the built in JSON 87 00:07:35,940 --> 00:07:44,250 method, returning the content, then back as JSON and then we can use that as I'll give it a variable 88 00:07:44,250 --> 00:07:45,420 name of JSON. 89 00:07:46,050 --> 00:07:52,510 And then what we want to do with the returned content is simply use it within the console and we're 90 00:07:52,530 --> 00:07:53,640 turning back data. 91 00:07:53,760 --> 00:07:56,090 So we're outputting the data into the console. 92 00:07:56,430 --> 00:08:01,230 And this actually should be JSON because we're referencing the variable name as JSON. 93 00:08:01,530 --> 00:08:08,970 So it's going to be returning back the content from this file and outputting it into the console so 94 00:08:08,970 --> 00:08:11,460 that we've got the contents of the adjacent file. 95 00:08:11,760 --> 00:08:16,910 And you can also extend on this as well to add in more items into the JSON file. 96 00:08:17,280 --> 00:08:19,830 So let's update and do first. 97 00:08:22,760 --> 00:08:29,000 And add in a first name for there, and once again, that just gets output into the console, if you 98 00:08:29,000 --> 00:08:36,800 want to make use of the data, you can always set a global variable and let's assign a global variable 99 00:08:36,800 --> 00:08:42,590 and we'll just call it data and just assign blank value to it. 100 00:08:42,830 --> 00:08:50,160 And then once we do get the JSON data coming back from the console, then we can assign to data. 101 00:08:50,300 --> 00:08:56,090 So to the global value of data that JSON content and then we can make use of it. 102 00:08:57,390 --> 00:09:04,350 And oftentimes when you are returning back the data, then within this function or you're going to pass 103 00:09:04,350 --> 00:09:08,190 the data into another function that's going to handle the output of the data. 104 00:09:08,460 --> 00:09:14,190 So this is just one way that if you are using it within a global object and you want to load more content 105 00:09:14,190 --> 00:09:19,770 into that global object, then you can make use of the data, because once again, this is promise based. 106 00:09:20,040 --> 00:09:24,540 So you do have to make and wait till the connection is complete. 107 00:09:24,840 --> 00:09:29,400 The new data is loaded before you can use it within your JavaScript code. 108 00:09:29,700 --> 00:09:32,520 So to practice creating a JSON file. 109 00:09:32,850 --> 00:09:34,940 Go ahead and construct adjacent file. 110 00:09:35,220 --> 00:09:36,810 Go over to Jason Lente. 111 00:09:36,900 --> 00:09:43,830 Just make sure that it is a valid adjacent file and then using JavaScript fetch, make a request to 112 00:09:43,830 --> 00:09:51,210 where your JSON file is located and output the contents of the file into your console and you can be 113 00:09:51,210 --> 00:09:52,710 ready to move on to the next lesson. 114 00:09:53,280 --> 00:09:58,860 So before the next lesson, to create a valid JSON file mixer and go check that it is a valid Jason 115 00:09:58,860 --> 00:09:59,130 file. 116 00:09:59,310 --> 00:10:04,590 Jason Validator then using JavaScript Fach connect to the contents of the file. 117 00:10:04,770 --> 00:10:10,230 And lastly, output the contents of the file into the console using JavaScript.