18.6 JSON Stringify

Stringify a JavaScript Object

Imagine we have this object in JavaScript:

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

Use the JavaScript function JSON.stringify() to convert it into a string.

const myJSON = JSON.stringify(obj);

• The result will be a string following the JSON notation.
• myJSON is now a string, and ready to be sent to a server:

Example 1: JSON Stringify - Stringify a JavaScript Object part 1

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);

You will learn how to send JSON to a server in the next chapters.

Stringify a JavaScript Array

• It is also possible to stringify JavaScript arrays:
• Imagine we have this array in JavaScript:

const arr = ["John", "Peter", "Sally", "Jane"];

Use the JavaScript function JSON.stringify() to convert it into a string.

const myJSON = JSON.stringify(arr);

• The result will be a string following the JSON notation.
• myJSON is now a string, and ready to be sent to a server:

Example 2: JSON Stringify - Stringify a JavaScript Object part 2

const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);

You will learn how to send a JSON string to a server in the next chapters.

Storing Data

• When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.
• JSON makes it possible to store JavaScript objects as text.

Example 3: JSON Stringify - Storing data in local storage

Storing data in local storage

// Storing data:
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Exceptions: Stringify Dates

In JSON, date objects are not allowed. The JSON.stringify() function will convert any dates into strings.

Example 4: JSON Stringify - Stringify Dates

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);

You can convert the string back into a date object at the receiver.

Stringify Functions

• In JSON, functions are not allowed as object values.
• The JSON.stringify() function will remove any functions from a JavaScript object, both the key and the value:

Example 5: JSON Stringify - Stringify Functions part 1

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);

This can be omitted if you convert your functions into strings before running the JSON.stringify() function.

Example 6: JSON Stringify - Stringify Functions part 2

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);

• Once a JS function is converted to a string with toString() function, it may be sent to a server using JSON.stringify() and XMLHttp.
• If you send functions using JSON, the functions will lose their scope, and the receiver would have to use eval() to convert them back into functions.