- [Instructor] Converting a JSON string to a data structure
is pretty straightforward.
I'm going to show you what that looks like in JavaScript
using the built-in JSON.parse method.
But in general, no matter what language
you're working with, the process of deserializing data
involves passing the JSON string to the utility method,
which returns the data structure.
Remember that JSON can encode either an object or an array,
but in JavaScript, as long as your JSON is valid
and uses the notation correctly,
the utility will understand what data structure is encoded
and will return that.
You don't need to identify what to expect beforehand.
The H+ store populates page content
using data from a backend database.
This data is provided to the frontend as it JSON string.
The items.js file contains a snippet of that JSON string,
containing data about two products.
I'm going to use the JavaScript JSON.parse method
to convert this to a data structure.
The product variable contains my data.
On a live website,
this would be the result of an HTTP request
using something like fetch, but for exploration,
I've hard coded this in a file.
I'll start by creating a new variable
called productsParsed.
So, that's const productsParsed,
and then it needed an equal sign,
and I'll set the value to the result of calling JSON.parse,
and passing the JSON string in the products variable.
So, that's JSON, all caps, dot parse,
and then in parens, products.
And that's a reference to the product variable
above on line one.
I'll save those changes, and then it needs to open up
products.html,
and I'm going to use my Go Live function for my web server
to open that up in Firefox.
And then I need to open my browser console.
And one way to do that is just to right click
and click Inspect.
That's going to open up the console.
You may see it in a different part of your screen,
but that's no big deal.
And then just click the Console tab,
and you'll have this no matter what browser you're using.
And so I can now type the names of variables
that are used in my code for this page.
And I can see their value here in the console.
So, I'm going to start by typing productsParsed
and press Enter, and there's the array structure
that's no longer a string.
I can use this gray arrow to open it up,
and I can see, I have a couple objects in there.
I can even use those gray arrows,
open those up and see all those key value pairs.
Now, for comparison,
I can also view the original product string here.
So, I'll just type product on a new line and press Enter.
Oh, no, it's products with an s.
And there's the unparsed string.
In some browsers,
you might instead get a parse data structure here.
And in that case, the browser developer tools
are doing some extra work behind the scenes
and automatically showing you the parsed version
of that JSON string.
If you wanted to see the raw JSON in a browser
that was doing that,
you'd need to check the settings for the browser
and turn off that option, that parses JSON automatically.
But here I can see that that original variable
is just a string.
I don't have any sort of structure here
at all in the console.
It's just treating it as a string.
So, for this web page,
that original products variable is a string
and the productsParsed variable that I just created
using JSON.parse actually has a data structure
that JavaScript can see and work with.
In JavaScript, JSON.parse works exactly the same
if the JSON data structure is an object.
So, back here in my editor, in items.js,
I have the item variable down here on line six.
This is a JSON string that contains an object.
So, down here on line nine,
I'm going to create another new variable,
and use const and call that itemParsed,
and use an equal sign to set the value,
and it's going to be JSON.parse,
and I'm going to pass in the item variable as the argument,
and end with a semi-colon, and I'll save those changes.
And then I'll go back to the browser, and in the console,
don't need to worry about this particular issue.
But instead, I want to look at the variable I just created.
So, I'm going to type itemParsed, there it is.
And if I press Enter, I've got an object this time,
not an array.
If I click that gray arrow, I can see the structure
and the object has four key value pairs.
So, JSON.parse can deal with JSON data
no matter which structure it's using.
And now that I have my data parsed, I can work with it.
So, I can reference properties of this object for instance,
using dot notation.
For instance, this itemParsed object has a name property.
So, I can enter itemParsed.name, and press Enter,
and the result is a string,
which is the value of the name property
of the itemParsed object.
So, once the data is parsed,
I can do anything I need to do with it in my application.