What exactly is JSON ?
Let us take a leaf directly out of JSON’s official documentation and just discuss a bit what JSON is and why should we be bothered about it ? Well, let’s answer the second question first.
JSON is important because we as web developers have decided to use it as the format in which we exchange data between servers and browsers and if you think about it, that is basically the entire web in a single line. So yeah, JSON is pretty important considering that it is the main format of information exchange on the web.
Example of JSON
Two terms that might come in handy are serialization and de-serialization. Serialization is to convert our data to a string so that it can successfully be transmitted as JSON whereas de-serialization is to accept string JSON data and convert it into usable data for us as developers or browsers to work with that data.
JSON.stringify and JSON.parse
The JSON.stringify() function can be called with one or two parameters. The first parameter is the value that has to be converted into a JSON string.
As you can see in the code example every value that is passed into the function is wrapped as a string, even arrays and objects ! Also, another thing to note is that values like NaN, undefined etc. are all converted to null when JSON.stringify() is run on them.
One very interesting thing is a toJSON property that objects can have. If any object has this property then JSON.stringify() will only stringify based on this property’s rules. Let us see an example :-
This is a very powerful technique that I have myself used many times , mostly to filter data that should be. or should not be sent when a particular object is stringified into a JSON string.
The same thing can also be achieved by passing a second argument to the JSON.stringify() function called the replacer. The replacer is also used to filter out properties from the value to be stringified (but please note that the toJSON method can be used to do a whole variety of things, filtering was just an example).
The replacer can be a function or an array. If we pass it as an array, then only the values inside that array will be stringified and all the other values will be ignored. Let us see an example of the same thing we did above but by using the replacer array.
Using an array replacer is supercool and easy to do when it comes to filtering properties from the object but if you want a bit more fine grain control like the toJSON function you can use the replacer as a function.
This works nearly similar to toJSON so I guess you can use any that you like and that suits your needs actually.
Next, let us see how we can work with JSON data when we receive it rather than send it.
A sibling to the JSON.stringify() function is the JSON.parse() function which does the exact opposite of its brother.
This function takes in two arguments – one being the JSON string that needs to be converted into JS and the other being an optional function in which you can do a transformation of the object while parsing it. Let use see a simple example first :-
Let us also see an example of the optional second argument that you can pass into the JSON.parse() function.
Example from MDN docs
This function is just similar to the transformer we use with JSON.stringify() .
Two very important things to keep in mind that often trip developers up are these :-
JSON.parse() throws an error if the JSON string has trailing errors.
JSON.parse() throws an error if the JSON string has single quotes instead of double as key wrappers.
All three of them throw syntax errors
And if you want to be a part of a facebook group with other great web developers and also me please join this facebook group -> https://www.facebook.com/groups/503230450489995