Search within TutorialsPark

Javascript JSON: Parsing and Serialization


Using JSON to parse data into a usable object.


Javascript JSON: Parsing and Serialization

The quick popularity of JSON can be attributed to the reason that data could be parsed into an usable object very easily using JSON.

Parsing data using XML was bit difficult, as the data has to be parsed into the DOM document, making the extraction a bit of a cumbersome exercise

Hence, elimination of extra method calls is one of the prime reasons of incredible popularity of JSON with JavaScript webdevelopers


Javascript JSON: Objects

Earlier, JSON parsers did a bit more than what JavaScript eval() functions could do, i.e parse, interpret and return the data as JavaScript objects and arrays.

But now JSON object has two methods : stringify() and parse()

stringify() : To serialize JavaScript objects into a JSON string.

parse() : To parse JSON into a native JavaScript value.

The demo below serializes a JavaScript object into a JSON string by making use of JSON.stringify() and stores the value in jsonString

The JSON string can be passed directly into JSON.parse() to create an appropriate JavaScript value.

Example: JSON Syntax JSON Object.

Give it a TRY! » Note:An an error is generated if the text passed into JSON.parse() is not a valid JSON.


JavaScript JSON : Serialization Options

The method JSON.stringify() can accept at the most two arguments, in addition to the object being serialized, these arguments are used to specify alternate ways to serialize a JavaScript Object.

The first argument is filter , which can be either a function or an array.

The second argument specifies an option for indenting the stringified JSON string.

Example: JavaScript JSON Serialization Option: Filtering of Result

Give it a TRY! » Note: Only the properties mentioned in the argument get serialized .


Javascript JSON Object Filtering: Function as an Argument

The behavior is slightly different when the second argument is a function. The function receives two arguments : the property key and property value

Filters apply to all objects contained in the object which is to be serialized, so an array of multiple objects with properties will result in every object including the properties specified for filtering.

Example: JavaScript JSON Object Filtering - Function as an Argument.

Give it a TRY! » Note: The key is always a string, but it can be an empty string if value isn't part of key-value pair.


JavaScript JSON Serialization: String Indentation

The third argument of JSON.stringify() is used to control indentation and white spaces.

The numerical values of the argument specifies the number of spaces ro indent each level.

Example: JavaScript JSON Serialization: String Indentation

Give it a TRY! » Note: The maximum numeric indentation value is 10, any value larger than 10 sets the value to 10.


Example: JavaScript JSON Serialization: Indentation using Text

If the indentation argument is a string , then the string is used as the indentation character for the JSON

Give it a TRY! » Note:There is a limit of 10 characters, if a longer string is used then it is truncated to 10 characters only.


JavaScript JSON Serialization: toJSON() Method

Other than JSON.stringify() , sometimes objects need custom JSON serialization, for that purpose the method toJSON() to return the proper JSON representation.

The method toJSON() can be used on any object to return a serialization value.

Example: JavaScript JSON Serialization: toJSON() Method.

Give it a TRY! » Note: The method toJSON() can be used in addtion to the filter method


JavaScript JSON : Parsing Options

The method JSON.parse() accepts an additon argument, it is called on each key-value pair.

The function is also called as reviver function, the other function JSON.stringify() (filter) is called as a replacer

The format of both the function looks the same, they take two arguments : key and value and are supposed to return a value.

Example: JavaScript JSON: Parsing Options

Give it a TRY! » Note: If the reviver function returns undefined, then the key gets removed from the result .