There's Way More to JSON.Stringify Than You Think

Summary

In this video, Dom explores the intricacies of JavaScript's JSON.stringify method, revealing its hidden capabilities. He demonstrates how to prettify JSON output with indentation and new lines using the third argument, and delves into the second argument's role in filtering object properties for JSON conversion. Dom also explains the use of replacer functions to filter or transform data, showcasing practical examples. The video is an insightful guide for developers looking to harness the full potential of JSON.stringify.

Takeaways

• 🔍 The `JSON.stringify` method in JavaScript converts objects or arrays into JSON strings.
• 📄 To make the JSON output more readable, you can use the third argument of `JSON.stringify` to add indentation with a specified number of spaces or a string like tabs.
• 🚫 The second argument of `JSON.stringify` can be an array specifying a whitelist of properties to include in the JSON output, useful for filtering sensitive data.
• 👨‍💻 Passing a function as the second argument allows for custom filtering and transformation of the JSON output, acting as a replacer function that runs for each property.
• 🔑 The replacer function is first called for the entire object, and then for each property, making it possible to manipulate the entire structure or individual values.
• 🛠️ Using the replacer function, you can filter out properties by returning `undefined` for certain conditions or transform values, such as multiplying numbers by a factor.
• 📊 The replacer function provides a powerful way to control the serialization process, allowing for both inclusion/exclusion of data and value transformations.
• 💡 While the replacer function is versatile, it's often simpler to create a new object with the desired properties before stringifying, especially for complex transformations.
• 👍 The video provides practical examples of how to use `JSON.stringify` with different arguments, demonstrating the method's flexibility in generating JSON strings.

Q & A

What is the primary function of JSON.stringify in JavaScript?

JSON.stringify in JavaScript is used to convert an object or an array into a JSON string.

How can you prettify the JSON string output using JSON.stringify?

You can prettify the JSON string by using the third argument of JSON.stringify, which allows you to specify the number of spaces for indentation or a string like a tab character.

What is the maximum indentation level allowed when using the third argument in JSON.stringify?

The maximum indentation level allowed is 10 spaces, regardless of the number specified.

What does the second argument of JSON.stringify do when it's an array?

When the second argument is an array, it acts as a whitelist to specify which properties of an object to include in the JSON string output.

What happens if you provide an empty array as the second argument in JSON.stringify?

Providing an empty array as the second argument results in no properties being included in the JSON string output.

Can you use a function as the second argument in JSON.stringify, and if so, what does it do?

Yes, a function can be used as the second argument, and it acts as a filter to determine which values are included in the JSON string by returning them, or it can transform the values by returning modified versions.

What is the behavior of the replacer function when it encounters the initial call with an empty key?

The replacer function is initially called with an empty key for the entire object, and if it returns the object itself, it proceeds to process each property.

How can you use the replacer function to filter out properties from the JSON string?

You can use the replacer function to filter out properties by returning 'undefined' for the properties you want to exclude from the JSON string.

Is it possible to modify the values during the JSON.stringify process using the replacer function?

Yes, you can modify the values by returning a transformed version of the value within the replacer function.

Why might someone choose to create a new object before using JSON.stringify instead of using the replacer function?

Creating a new object before using JSON.stringify might be preferred for clarity and simplicity, especially when the transformations or filtering are complex or numerous.

Outlines

00:00

🔍 Deep Dive into JSON.stringify in JavaScript

In this segment, Dom introduces the JSON.stringify function in JavaScript, explaining its basic use for converting objects or arrays into JSON strings. He demonstrates how to use the function with an example user object, showcasing how to prettify the JSON output with indentation and new lines by using the third argument, which can be a number for space-based indentation or a string, such as a tab character, for tab-based indentation. Dom also hints at the more advanced features of the second argument, which he will explore later in the video.

05:05

🛠 Customizing JSON.stringify with Replacer Functions

Dom continues the exploration of JSON.stringify by focusing on the second argument, which can be used to filter or transform the JSON output. He explains that an array can be provided to act as a whitelist for properties to include, or a function can be used for more complex filtering and transformations. Dom creates a replacer function that initially returns the value directly, which has no effect on the output. He then modifies the function to return 'decode' for all properties, demonstrating that the replacer function is called for the entire object first, and then for each property. By adding conditions to the replacer function, Dom shows how it can be used to filter out properties or to manipulate property values, such as doubling the value of numerical properties. This part of the video provides a detailed look at the versatility of the replacer function in JSON.stringify.

Keywords

💡JSON.stringify

JSON.stringify is a JavaScript method that converts a JavaScript object or array into a JSON string. It's a crucial function for data serialization, allowing for easy data transfer between a frontend and backend or storage. In the video, it's used to demonstrate how to convert a user object with properties into a JSON string, which is then logged to the console.

💡Prettify

Prettify refers to the process of formatting code or data to make it more readable. In the context of JSON.stringify, prettifying a JSON string means adding indentation and new lines to make the structure clear. The video explains how to use the third argument of JSON.stringify to achieve this, enhancing the human readability of the JSON output.

💡Indentation

Indentation is the space used to structure text, typically to indicate levels of nesting in code. In JSON.stringify, indentation is controlled by the third argument, which can be a number specifying the number of spaces or a string such as a tab character. The video demonstrates how to use this feature to format JSON data with different levels of indentation.

💡Replacer

The replacer in JSON.stringify is a second optional argument that can be an array or a function. It determines how the object is stringified. If an array, it acts as a whitelist of properties to include. If a function, it filters or transforms the values. The video illustrates both uses, showing how to selectively include properties and how to manipulate values before they're converted to JSON.

💡Whitelist

A whitelist in the context of JSON.stringify is an array of property names that the replacer argument specifies should be included in the JSON string output. This is used to filter the object's properties, ensuring only certain values are serialized. The video uses an example where only 'memberSince' and 'ID' are included, demonstrating how to create a whitelist.

💡Transformation

Transformation refers to the process of modifying data. In JSON.stringify, when a function is used as the replacer, it can transform the values of the object's properties before they are converted to JSON. The video gives an example where numeric values are doubled, showing how the replacer function can be used for data manipulation.

💡Filter

Filtering in JSON.stringify is achieved through the replacer function, which can return 'undefined' for properties that should not be included in the JSON string. This acts as a filter, allowing for conditional inclusion of data. The video demonstrates filtering by only including properties with string values.

💡Console.log

Console.log is a JavaScript function used to output information to the web browser's console. In the video, console.log is used to display the results of JSON.stringify, allowing the viewer to see the JSON string representation of the object and the effects of prettification and filtering.

💡Serialization

Serialization is the process of converting an object into a format that can be easily stored or transmitted, such as a JSON string. JSON.stringify is a serialization method for JavaScript objects. The video explains how objects are serialized into JSON, which is a lightweight data-interchange format.

💡Data Manipulation

Data manipulation involves altering data structures or values. In the context of the video, data manipulation is shown through the use of the replacer function in JSON.stringify, where values can be changed or filtered out before serialization. This is useful for preparing data for specific uses, such as adjusting numerical values or excluding sensitive information.

💡Sensitive Information

Sensitive information refers to data that should be protected or hidden due to privacy concerns. In the video, the concept is mentioned in relation to the replacer function, which can be used to exclude sensitive properties like IDs or tokens from the JSON string output before it's sent to a server.

Highlights

Introduction to JSON.stringify in JavaScript and its capabilities.

JSON.stringify converts objects or arrays into JSON strings.

Demonstration of JSON.stringify with a user object example.

Using JSON.stringify to prettify JSON with indentation.

The third argument in JSON.stringify for indentation control.

Limitation of indentation to a maximum of 10 spaces.

Option to use a string, like 'tab', for indentation instead of spaces.

The second argument in JSON.stringify for filtering object properties.

Whitelisting properties to keep in the JSON output using an array.

Using an empty array results in no data in the JSON output.

The replacer function as the second argument for filtering and transforming JSON data.

The replacer function is called for every property and the entire object.

Returning 'undefined' from the replacer function excludes properties from the output.

Using the replacer function to manipulate data, such as doubling numbers.

Practical use case of the replacer function for sensitive data filtering.

The option to create a new object for transformations before JSON.stringify.

Conclusion and summary of JSON.stringify features discussed.

Transcripts

how's it going guys my name is Dom and

today we're going to be doing a bit of a

deep dive into json. stringify in

JavaScript because it actually has quite

a few really nice hidden gems okay so

just as a quick recap here Json Stringer

fire is going to take an object or an

array then convert it into a Json string

for example I've got this user object

right here with five properties on it if

I was to console log json. stringify the

user object we of course are going to

get the Json version of that object

right here in the console as you can see

it is all condensed onto a single line

but you can use Json stringify to

prettify this Json give it indentation

and so on that is going to be done using

the third argument to this function here

but the most interesting part is the

second argument and I'm going to be

showing you that towards the later part

of this video so first let's have a look

at how to uh prettify this Json so let's

provide null as the second argument like

I said we're going to be coming back to

this one very shortly for the third

argument let's use the number two what

this does here is I to console log now

we can see we get

indentation uh and new lines and so on

okay this here is the number of spaces

to use for indentation so we get one and

two you can say for example example six

I'll try it again now we get more space

there of course six spaces for each

indentation of course 12 uh when it

requires two levels of

indentation now this here is going to

max out at 10 so even if you were to say

for example 4,000 it's only going to uh

you know go up to 10 and then stop there

as the max so now we can see we only get

10 here as opposed to of course 4,000 as

the indentation so that is your spaces

version of uh this particular feature

here but you can also provide a string

okay the most common string being used

is going to be the tab character so I

can say back SLT this here is now going

to use tabs for the indentation as

opposed to spaces and it's hard to know

if it's actually tabs in the console

here but trust me it is definitely going

to be tabs when you H go ahead and use

it you can also say double tab for

example some something like this not

sure why you want to do this but you can

see it does definitely work okay you can

actually provide whatever string you

want here for example decode is also

going to be perfectly valid I'll try it

again now we get decode the string as

the indentation between every single

level so I think for the most part

you're only going to be really using a

back SLT or tab character here um for

the majority of situations and there we

go now let's jump to this second

argument right here this applies mostly

if not all the time to uh objects when

you're trying to convert yeah objects to

Json and not arrays now what is the

second argument well you can provide two

different types of values to this

similar to the third one now having a

look at what happens when you provide an

array to this argument this here is

going to uh specify a white list of what

to keep in the output for example if I

was to say member since okay and also

let's just do ID now I'll try it again

console log it's only going to give us

member SN and ID whatever goes in here

this or these properties are going to be

included in the output okay for example

if you also were to provide an empty

array in this case you're going to get

no dat um in the output so there you go

it's a white list of what to keep okay

this here might be useful if you want to

emit certain values like maybe think

about things like IDs or tokens or

anything other that might be sensitive

before sending to your server side maybe

things like that um and that's of course

if you don't go ahead and make a new

object instead before passing it to your

Json string ofile but of course this

here is just going to be an option if

you want to use it okay okay now that is

the array version of that second

argument what if you were to provide a

function instead let's have a look so

let's create a new constant here called

replacer this is going to be the

function which we're going to be passing

in to the second argument let's say here

key and value and for now let's just

return um let's just return value so

this here acts as kind of like a filter

in a way um to your Json stringify so

we're going to take this function and

then reference it as the second argument

right here like this and we can see that

returning value directly is going to

have no effect on the output and there

we go okay but what is this actually

doing well this function okay is going

to run for all your properties so all

these five properties here Whatever Gets

returned that's going to be what the

value is in your Json uh output okay

let's say return and let's do decode

instead now something strange will

happen here but let's just try it anyway

we actually just get decode okay that's

because this replacer also runs for the

entire object itself okay so I'll repeat

that when you provide replacer you're

going to get a function call for the

entire object so what's happened here is

we're saying look let's run replacer it

runs on the entire object first then it

just simply returns decode which is why

we get decode right here okay to make

things easier to understand let's say if

key is equal to empty string then return

value okay because your key is going to

be every single property here and the

key being an empty string is the first

one the initial one that's when it's for

the whole object meaning now F to save

this Runner again we get the whole thing

returned back this time right because we

return the object back then it goes

ahead and proceeds and then does this

for every other property and we get

decode as the output able to manipulate

or replace transform the values in the

Json to make this interesting you might

say for example I want to only keep the

strings um you know or sorry I only keep

the properties with the string as the

value okay so in that case I might say

okay no worries if type of value does

not equal to be

string then we're going to return

undefined otherwise simply return the

value like that so this here is going to

run for ID okay in this case ID is a

string so this won't run and you simply

return the value so in this case of

course A8 EF know 4 Etc same goes for

display name and username they of course

they're all strings so it's going to

work you get to remember since okay it's

going to say okay noris if type of uh

2017 is not a string yes return

undefined because we return undefined

this here is going to emit it from the

output I'll run the script again and now

we can see we only get those string

values in the output right there okay so

you can use it to filter your values

like this return undefined and return

the value with conditions Etc or you can

use it to manipulate your data

okay uh so you could say let's just do a

quick example here if type of value is

equal to number okay if it's a number

then just say return value time 2 okay

let's try this now and we get member

since

4034 instead of 2017 of course that is

that number multiplied by two so you can

see that he can also do Transformations

as part of the replacer now if I'm being

honest you probably won't use this very

often and it's a similar story to

providing the array in that you probably

just create a new object up here

beforehand and do your Transformations

and your uh when you want to get rid of

your keys and things like that remove

your keys so unlikely you want to be

using this but look the option is there

for you to use and it's a bit

interesting um to see it in action so

that is the Json stringify function in a

bit more detail if this video helped you

out make sure to drop a like And

subscribe to decode and here is another

video