How to use JSON.stringify

  • 4 min read
  • April 6, 2022
linkedin twitter facebook reddit
linkedin twitter facebook reddit

The JSON.stringify() method is used to convert a javascript object into its JavaScript Object Notation (JSON) string representation. This can be converted directly, or filtered through a replacer that manipulates each element as it is handled. The formatting can be additionally modified using an optional parameter to define the whitespace separator between each JSON element in the result. The output is a string representation of the JSON for the object or value provided.

A Basic Example

The following sample code defines a basic object, then prints the object’s JSON to the console:

object={a:1, b:2, c: [3,4], d: { e:5, f:6 }};
console.log(JSON.stringify(object));

Output:

'{"a":1,"b":2,"c":[3,4],"d":{"e":5,"f":6}}'

 

Syntax

JSON.stringify(object, replacer, space)

 

Parameters
JSON.stringify has the following parameters:

  • Object – The object or value to convert to JSON
  • Replacer – optional – a function or an array which filters the properties to convert to JSON
  • Space – optional – a formatting helper to insert a number of spaces between each JSON element.

The return value of JSON.stringify() is a string containing the JSON representation of the object provided.

 

object={a:1, b:2, c: [3,4], d: { e:5, f:6 }}; 
result = JSON.stringify(object)); 
console.log(result); 
>> '{"a":1,"b":2,"c":[3,4],"d":{"e":5,"f":6}}'

Notes on the object conversion to JSON
Each attribute of an object is converted to JSON using the internal .toJson() method if it is available. Primitive types, such as strings, integers, and booleans, are converted to their appropriate JSON representation. Symbols, functions, and the value undefined NOT included in the resulting JSON. Method names and object properties are only included if they are valid JSON elements and are enumerable.

object={a:1, b:Symbol(2)}; 
>> {a: 1, b: Symbol(2)} 

JSON.stringify(object) 
>> '{"a":1}'

Date properties are converted using the standard JSON date format (the ISO-formatted string representation of the date).

object={a:1, b:new Date()}; 
>>{a: 1, b: Sun Apr 10 2022 12:10:46 GMT-0500 (Central Daylight Time)} 

JSON.stringify(object) 
>>'{"a":1,"b":"2022-04-10T17:10:46.743Z"}'

The value null is, not surprisingly, represented as null. However, Infinity and NaN are also represented as null in the output JSON, which could be problematic if your code relies upon these values to operate.

object={a:1, b: null, c: NaN, d: Infinity }; 
>> {a: 1, b: null, c: NaN, d: Infinity} 

JSON.stringify(object) 
>> '{"a":1,"b":null,"c":null,"d":null}'

The Replacer Function
The replacer function is used to manipulate object properties during the JSON conversion. It can be provided as either an array or a function. For the array, the contents of the array are used as a simple filter to limit the properties of an object that are included in the final JSON output string.

object={a: 1, b: 2, c: 3, d: 4}; 
>> {a: 1, b: 2, c: 3, d: 4} 

JSON.stringify(object, function(key, value) { 
       if(key=='c'){ 
             return 'C-c-c-combo breaker!!!'; 
       } 
       return value;  
}) 
>> '{"a":1,"b":2,"c":"C-c-c-combo breaker!!!","d":4}'

When using the replacer function, you are given two arguments: the name of the property (the key), and the value of the property. You can manipulate this however you wish. The results are treated in one of several ways:

  • If the result is directly convertible to JSON, it is converted
  • If the result is a function, symbol, or undefined, the key is not included in the output
  • If the result is a complex object, the replacer is called recursively on the new object

Using the Space parameter
The space parameter can be used to insert an arbitrary number of spaces or characters between each JSON element parsed. The following limitations are present:

  • If the value provided is an integer greater than zero, that number of spaces are inserted during the conversion. This value is capped at 10.
  • If the value is less than or equal to zero, no spaces are inserted
  • If the value is a character array or string, up to the first ten characters are used instead of whitespace.
JSON.stringify(object, null, 10) 
>> '{\n "a": 1,\n "b": 2,\n "c": 3,\n "d": 4\n}' 

JSON.stringify(object, null, "HELLO WORLD") 
>> '{\nHELLO WORL"a": 1,\nHELLO WORL"b": 2,\nHELLO WORL"c": 3,\nHELLO WORL"d": 4\n}' 

JSON.stringify(object, null, -2) 
>> '{"a":1,"b":2,"c":3,"d":4}'

Exceptions thrown
The JSON.stringify() method throws the following exceptions:

  • A TypeError when a cyclical reference is found in the object being converted
  • A TypeError when a BigInt value is encountered (BigInts cannot currently be converted to JSON)

Related Posts

How to Use parseInt() in JavaScript

How to Use parseInt() in JavaScript

The parseInt function parses a string argument and returns an integer. In its most simple form, the function looks like this: const x = ‘8’; console.log(parseInt(x));

How to Use promises in JavaScript

How to Use promises in JavaScript

JavaScript is a synchronous language, yet sometimes asynchronous behavior is required. For example, you may need to use an asynchronous function while waiting for data to

How to Use the for…in Statement in JavaScript

How to Use the for…in Statement in JavaScript

The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement