- [Instructor] When you want to transmit data,
especially on the web,
you generally need to convert it to JSON.
There are other formats in use.
So depending on the system you're sending data to,
you may instead need to convert to one of them.
Other popular notations for data sharing include YAML,
which stands for yet another markup language
and XML or extensible markup language.
JSON is common,
but by no means universal.
So if you find you need to learn how to work
with a different notation,
check out a course here
in the library to help you get started.
But JSON is by far the most popular on the web.
And whether you have an object
or an array that you want a stringify into JSON,
the process is pretty straightforward in JavaScript.
The built-in method
is pretty self-explanatory, JSON.stringify.
In JavaScript or any other language,
the process simply involves passing the structure to the
utility method, which returns a JSON string.
When a user adds items to a shopping cart
on the H plus web store
and wants to order the frontend needs to stringify
the shopping cart object
and transmit it to the backend for processing.
The cart.js file contains an array
with sample shopping cart data.
I'm going to use the JavaScript JSON.stringify method
to convert this to a JSON string.
The cart variable contains my array.
On a live website,
the object may be stored in a cookie or local storage,
but for exploration,
I've hard-coded an object in a file.
I'll create a new variable down here on line 25,
and I'll call that cartJson.
And the value is going to be the result of
calling JSON.stringify
and passing the cart array in the cart variable.
I'll save those changes
and then open up products.html
and use my web server to check that out in my browser.
And I have the browser console open.
And so at the prompt I can type cartJson and press enter.
And I see the string.
Now in some browsers,
you may instead see a parsed version of the array here.
It's something that browser tools are doing to help you out.
So you can go into your settings
and try and change that if
you want to actually see the string here,
but you can also just see on your screen here,
that cartJson, the results of the command,
we just typed actually produces that JSON string.
And if I look at cart instead,
I can see that that's displayed as an array.
So I definitely changed the structure of that content.
JSON.stringify works exactly the same with an object.
And to try that out,
the cart.js file includes a variable called single
down here on line 27,
which is an object and contains information
on a single product.
So down on line 39,
I'll create a new variable const
and I'll call that singleJson equals
and I'll use JSON.stringify
and in parens I'll pass in the single variable
and end with a semi-colon
and I'll save my work there.
And back in my browser console I'll type singleJson.
And I can see here
that I have a JSON string containing that object.
So no difference in using JSON.stringify on an array
versus using it with an object.
Now that I have stringified JSON,
I can include it in an HTTP request to the backend
and keep the checkout process going for the user.
That's super common on the web and JSON's strings are
indispensable in exchanging data between browsers
and servers and throughout the infrastructure
of the internet.