- [Instructor] After a program receives JSON data,
it puts it to work,
depending on what the program is designed to do,
there are all sorts of things it can do with the data
such as add it to a database,
check it for errors or format it and display it.
To get a taste of the process,
let's look at a web based example.
The start files for this video include web page files
for the H Plus Fitness Company.
If I open up products.html and use my web server
or view that in the browser,
I can see that the structure of the page
is pretty bare bones, just the heading,
but the page is supposed to display images and information
about available products that it retrieves
in the server as JSON.
The script.js file is set up to fill
in the product information.
It begins with a variable called raw data,
which is one long string of JSON data containing
information on several products, in everyday code,
this would instead use an actual server request
that returns JSON data, but for our purposes,
we'll assume that's done
and the data has been fetched and stored
in this variable.
Further on down,
the rest of the file contains code that takes data
for each item and adds it to the webpage.
The only step that's missing is to parse the JSON
into a format that JavaScript can work with.
JavaScript uses the JSON.parse method to convert a
JSON string to a JavaScript object or array.
My script.js file includes a comment pointing out where
in the file that JSON data needs to be parsed and stored.
And that's right after lines three and four,
I just need to add a single statement, so on line five,
I'm going to enter const to make a variable
and call it data.
And I'm going to set its value as JSON.parse
and then rawData,
which is the variable name of the raw data
at the top of the file.
The result of parsing that raw data is stored
in this data variable.
And that variable name is used
in the existing code that follows to retrieve
information about each product and add it to the web page.
So I'll save my work and I'll go back to my browser.
And now I see all the products displayed based on the
product information that was in the JSON string
in my JavaScript file.
So we got raw JSON data and then use the utility
that's specific to this programming language,
JavaScript to convert the data to a format
that JavaScript can work with.
And then we use the data to do
what the program was written for,
displaying the data to end users in the web browser window.