Creates JSON string from a JavaScript object

var obj = { name: "John", age: 30, city: "New York" };

// Converts object into JSON string
var myJSON = JSON.stringify(obj);

// Puts the string into element with id: demo
document.getElementById("demo").innerHTML = myJSON;

JSON is built on 2 structures:

Object

- a collection of key/value pairs

Array

- an ordered list of values

JSON schema

is a JSON document that describes other JSON document. It is a specification for JSON based format to define the structure of JSON data

- Describes your existing data format
- Defines the structure of a JSON message
- Clear, human- and machine-readable documentation
- Complete structural validation, useful for automated testing
- Complete structural validation, validating JSON message
- Can be used to validate API request and response

An object may provide method toJSON for to-JSON conversion. JSON.stringify automatically calls it if available

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

let meetup = {
  title: "Conference",
  room
};

// document.write(JSON.stringify(room));
document.write(JSON.stringify(meetup));

Result of the code above is the following

{"title":"Conference","room":23}

Unsupported data types will be converted to

null

when we want to JSON.stringify the JavaScript object

document.write(JSON.stringify({ x: 5, y: 6 }) + "<br />");
// expected output: "{"x":5,"y":6}"

document.write(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]) + "<br />");
// expected output: "[3,"false",false]"

document.write(JSON.stringify({ x: [10, undefined, function(){}, Symbol('d'), new Date(2006, 0, 2, 15, 4, 5)] }) + "<br />");
// expected output: "{"x":[10,null,null,null,"2006-01-02T11:04:05.000Z"]}"

The third argument of

JSON.stringify(value, replacer, space)

is the number of spaces to use for pretty formatting

let user = {
  name: "John",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

document.write('<pre>' + JSON.stringify(user, null, 8) + '</pre>');

It’s fine if we want to send an object over a network. The

space

argument is used exclusively for a nice output. Note: max value of space parameter is

20

The result of the above code:

{
        "name": "John",
        "age": 25,
        "roles": {
                "isAdmin": false,
                "isEditor": true
        }
}

It has 8 spaces for each TAB

Most of the time,

JSON.stringify

is used with the first argument only. But if we need to fine-tune the replacement process, like to filter out

circular references

, we can use the second argument of

JSON.stringify

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup references room
};

room.occupiedBy = meetup; // room references meetup

document.write( JSON.stringify(meetup, ['title', 'participants']) );

If we pass an array of properties to it, only these properties will be encoded, so the result will be:

{"title":"Conference","participants":[{},{}]}

As the result shows, the property list is applied to the whole object structure. So the objects in

participants

are empty, because

name

is not in the list. Let’s include in the list every property except

room.occupiedBy

that would cause the circular reference:

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup references room
};

room.occupiedBy = meetup; // room references meetup

document.write( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );

The result will be:

{"title":"Conference","participants":[{"name":"John"},{"name":"Alice"}],"place":{"number":23}}

Now everything except

occupiedBy

is serialized. But the list of properties is quite long. Fortunately, we can use a function instead of an array as the

replacer

.

We can use a function instead of an array as the

replacer

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup references room
};

room.occupiedBy = meetup; // room references meetup

// All the properties (except occupiedBy) are the encoded
document.write( JSON.stringify(meetup, function replacer(key, value) {
  return (key == 'occupiedBy') ? undefined : value;
}));

The function will be called for every

(key, value)

pair and should return the

replaced

value, which will be used instead of the original one. Or

undefined

if the value is to be skipped. ... In our case, we can return

value

“as is” for everything except

occupiedBy

. To ignore

occupiedBy

, the code above returns

undefined

. The result of the code above will be the following:

{"title":"Conference","participants":[{"name":"John"},{"name":"Alice"}],"place":{"number":23}}

As we expected all the values are encoded except

occupiedBy