There's Way More to JSON.Stringify Than You Think
Summary
TLDRIn 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
đ 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.
đ 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.
Mindmap
Keywords
đĄJSON.stringify
đĄPrettify
đĄIndentation
đĄReplacer
đĄWhitelist
đĄTransformation
đĄFilter
đĄConsole.log
đĄSerialization
đĄData Manipulation
đĄSensitive Information
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
5.0 / 5 (0 votes)