- [Instructor] Sometimes it's handy to have a JSON string
in human readable format.
For instance, when you're encoding a JavaScript object
or array into JSON, especially a large one,
you may run into problems that require debugging.
It can be useful to examine the JSON string
and identify where things go wrong,
but JSON is not made for human readability,
so examining the raw JSON won't necessarily do you any good.
When I'm converting to a JSON string in JavaScript,
I use the JSON.stringify method
and pass it just the object or array to be encoded.
However, the stringify method in JavaScript
takes additional arguments,
one of which is designed precisely for this purpose.
After the value to be converted to a JSON string,
you can optionally pass two additional arguments.
The first optional argument is a function that modifies
how the conversion happens.
The second optional argument lets you specify indentation
for levels of hierarchy within the encoded data,
such as key names within an object.
If you specify a number, then each successive level
is indented this number of spaces.
You can instead pass the string\t to use a tab.
In the start files for this video,
script.js contains the raw data variable
whose value is a large JavaScript object.
And on lines three through six,
I'm logging back, parsing it over to a JavaScript object,
and then logging it again.
But I want to take that parsed data
and I want to re-stringify it
and I want to use some of this formatting
to see if I can make it readable.
So here on line 10,
I'm going to start by creating a console.log statement,
another one, and I'm going to pass it JSON.stringify,
and my parsed object, which is in the variable data.
But instead of stopping there,
I want to add those indents
so I can examine the string in the browser console.
So after the word data, but before that closing paren,
I'm going to add a comma,
and then I need to add the second argument.
Now I don't have a function that I want to use
to modify the stringification process,
so instead, I'm going to specify null,
and then I'm going to add another comma,
and then my third argument,
and this is the number of spaces to use for indents.
I want to use four spaces
just to make sure I can see those indents.
So I'm going to enter the number four.
So I'll save that.
I will open up my products.html file
and use my HTTP server to open that in the browser.
I'll open my Developer Tools, and in the console,
I can see that I have readable content here
for my last console.log statement.
Now I can tell that I am actually looking at a JSON string
because, for one thing, each property name is in quotes,
and that's not the case
when I'm looking at an object or an array.
For instance, here,
I can see when I dig into one of these sub-objects
that these key values don't have quotes around them,
but in a JSON string,
the keys and the values have to be quoted
when there's strings.
So the other thing I noticed here
is there's no color coding.
This is all black text on a white background in my case.
And so, I'm actually looking at a JSON string
that's just been broken up and indented.
And with those line breaks and indents,
I can easily compare the stringified code
with the code for the original object.
If I was having a problem, I could compare the two,
identify where things were going wrong
and then figure out how to solve the problem.