In this lesson, we are going to be looking at Jason and using Jason data directly within our JavaScript
code.
So let's go ahead and create another James file called this one app to James and then create that new
file within the same directory.
And it was just save it as app to Dot James.
I've also still got the editor opened on the left hand side and as well I've got my browser window opened
on the right hand side going over to the index page that's serving up the app to us.
And there's more information available about Jason at the Mozilla Developer Network.
So Jason contains data and it's really easy to pass that data and make use of it within a JavaScript.
JSON is short for JavaScript object notation and converting values from JSON to JavaScript allows you
to really easily use the data.
There are some key differences within JavaScript and Jason.
So we saw in the previous lessons that we can create objects and arrays within the property names of
the objects they need to be double coded strings and trailing commas are forbidden.
So if, for instance, you have a trailing comma and a trailing comma is something like where you've
got a person and let's just do a very simple one here.
So if we have a trailing comma within JavaScript, this person is still going to be OK.
But because we do have this trailing comments, expecting another value with the comma separation.
So that's where we're not able to add in the trailing comma.
So that one's going to cause a problem if it's adjacent data.
There's a number of places that you can go to lente JSON data to make sure that it's valid.
Jason,
you can type into the search engine, Jason Lente and go to any one of the ones that show up and select
your JSON data copy, paste it into the validator and you'll see that it's going to throw an error because
we have that excess comma.
But once we remove the comma, we have once again valid JSON.
So that is important to have the not have the trailing end as well, to have the double quotes around
the property names.
So even though this will work within JavaScript, it's not going to work within as valid.
Jason.
So it's always a good idea.
Even when you're writing just JavaScript, if you do work a lot with Jason to make sure that it is properly
structured JSON, it's not going to hurt the JavaScript and it'll help you familiarize yourself a lot
more with how to construct JSON data.
So leading zeros are prohibited within numbers.
So that means that if we have no value and we have a leading zero.
And I'll just move this to the next slide, we'll do a wrap there and then I'll cancel out whatever
we've got per person within JavaScript.
So go back to the console.
That's fine.
It's still output's it as one.
But if I was to take this JavaScript object and pasted in here and do a validate JSON, it's going to
throw an error because it's expecting that this value is not going to have the leading zeros.
Also, decimal point must be followed by at least one digit and nine and infinity are unsupported.
So those are the key differences between JavaScript and Jason.
They've got some more information on the breakdown of what type of values you can have so you can have
a boolean value, you can have NUL, you can have a number, a string, an object or an array.
So those are also the common ones that we're using within JavaScript as well.
There's also methods that are listed in here and we're going to look at more of those in detail.
And coming up by Jason Parsons's on String OWFI.
So let's go ahead and copy this information and create JSON file and then bring that into our JavaScript.
So as long as it's got a G.S. extension, this is going to run as a JavaScript file.
So in some cases, you might see that somebody might indicate that there's an object and they have a
G.S., but they're still defining the object value in a true JSON file.
You'd be using the extension dict GSO N and just having the JSON at data sitting within there and then
that would be valid JSON data so that you could access that data file from any.
Scripting language, and in this case, we are going to be using JavaScript.
So let's go ahead and create a new file and copy the JSON data into the new file.
And then I'm going to save this as a JSON file.
So we'll call it G one JSON and that's our JSON file.
And we're going to also now access this using JavaScript.
So instead of defining the value of person.
And looking at the value of person, we're going to make a fetch request to the Jason file and then
return that value as usable information into our JavaScript.
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
function that's going to call it my Jason.
And what this function will do is this will make a fetch request and the request is going to go to the
Web you URL.
And in this case, wherever we've got our JSON data is going to be the euro that we're looking for.
So that's the one Jason file.
And because it's on the same directly, we're making a fetch request to read up on fetch.
There's more information Musila Developer Network using fetch and it's got an example here.
So Fetch does work off of promises.
So the idea for a fetch is that we make a request to ever the endpoint is so in this case, it's going
to be the Jason file where we're turning back a response from that endpoint and the response it if it
is JSON data, there's also a method that is called JSON and this is a method that defines the body
mixin and basically it Tranz forms the JSON.
It it's expecting JSON, it transforms it into usable data object.
So returning back to the JSON into adjacent format and it's not going to come back as a string.
If you're using the JSON method, it returns it back as an object.
And this then is a usable object in JavaScript.
So reading return back as data.
And then here in this example, they're looking at the data.
So we're going to do the exact same thing, so pressing and doing a fetch request to the euro.
And then once we make the connection, we're going to wait for the response object and then within the
response, using the function arrow notation, taking that response object and then the built in JSON
method, returning the content, then back as JSON and then we can use that as I'll give it a variable
name of JSON.
And then what we want to do with the returned content is simply use it within the console and we're
turning back data.
So we're outputting the data into the console.
And this actually should be JSON because we're referencing the variable name as JSON.
So it's going to be returning back the content from this file and outputting it into the console so
that we've got the contents of the adjacent file.
And you can also extend on this as well to add in more items into the JSON file.
So let's update and do first.
And add in a first name for there, and once again, that just gets output into the console, if you
want to make use of the data, you can always set a global variable and let's assign a global variable
and we'll just call it data and just assign blank value to it.
And then once we do get the JSON data coming back from the console, then we can assign to data.
So to the global value of data that JSON content and then we can make use of it.
And oftentimes when you are returning back the data, then within this function or you're going to pass
the data into another function that's going to handle the output of the data.
So this is just one way that if you are using it within a global object and you want to load more content
into that global object, then you can make use of the data, because once again, this is promise based.
So you do have to make and wait till the connection is complete.
The new data is loaded before you can use it within your JavaScript code.
So to practice creating a JSON file.
Go ahead and construct adjacent file.
Go over to Jason Lente.
Just make sure that it is a valid adjacent file and then using JavaScript fetch, make a request to
where your JSON file is located and output the contents of the file into your console and you can be
ready to move on to the next lesson.
So before the next lesson, to create a valid JSON file mixer and go check that it is a valid Jason
file.
Jason Validator then using JavaScript Fach connect to the contents of the file.
And lastly, output the contents of the file into the console using JavaScript.