JSON Stringify

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JSON Stringify

JSON is commonly used to exchange data to/from a web server.

When sending data to a web server, the data needs to be a string.

Convert a JavaScript object into a string using JSON.stringify().

Stringify a JavaScript Object

Imagine that  there is an 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 is a string following the JSON notation.

myJSON is now a string, and ready to be sent to a server:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Create a JSON string from a JavaScript object.</h2>

<p id=”demo”></p>

<script>

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

const myJSON = JSON.stringify(obj);

document.getElementById(“demo”).innerHTML = myJSON;

</script>

</body>

</html>

Output

Create a JSON string from a JavaScript object.

{"name":"John","age":30,"city":"New York"}

Stringify a JavaScript Array

You can also stringify JavaScript arrays:

Imagine there is an 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 is a string followed by the JSON notation.

myJSON is now a string, and ready to be sent to a server:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Create a JSON string from a JavaScript array.</h2>

<p id=”demo”></p>

<script>

const arr = [“John”, “Peter”, “Sally”, “Jane”];

const myJSON = JSON.stringify(arr);

document.getElementById(“demo”).innerHTML = myJSON;

</script>

</body>

</html>

Output

Create a JSON string from a JavaScript array.

["John","Peter","Sally","Jane"]

Storing Data

When storing data, the data has to be in a certain format, and where you choose to store it, the text is always one of the legal formats.

JSON allows you to store JavaScript objects as text.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Store and retrieve data from local storage.</h2>

<p id=”demo”></p>

<script>

// 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;

</script>

</body>

</html>

Output

Store and retrieve data from local storage.

John

Exceptions

Stringify Dates

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JSON.stringify() converts date objects into strings.</h2>

<p id=”demo”></p>

<script>

const obj = {name: “John”, today: new Date(), city: “New York”};

const myJSON = JSON.stringify(obj);

document.getElementById(“demo”).innerHTML = myJSON;

</script>

</body>

</html>

Output

JSON.stringify() converts date objects into strings.

{"name":"John","today":"2022-09-04T11:55:01.596Z","city":"New York"}

Stringify Functions

In JSON, functions are not allowed as object values.

The JSON.stringify() function removes any functions from a JavaScript object, both the key and the value:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>

<p id=”demo”></p>

<script>

const obj = {name: “John”, age: function () {return 30;}, city: “New York”};

const myJSON = JSON.stringify(obj);

document.getElementById(“demo”).innerHTML = myJSON;

</script>

</body>

</html>

Output

JSON.stringify() will remove any functions from an object.

{"name":"John","city":"New York"}

This can be omitted, by converting your functions into strings before running the JSON.stringify() function.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>

<p>Convert functions into strings to keep them in the JSON object.</p>

<p id=”demo”></p>

<script>

const obj = {name: “John”, age: function () {return 30;}, city: “New York”};

obj.age = obj.age.toString();

const myJSON = JSON.stringify(obj);

document.getElementById(“demo”).innerHTML = myJSON;

</script>

</body>

</html>

Output

JSON.stringify() will remove any functions from an object.

Convert functions into strings to keep them in the JSON object.

{"name":"John","age":"function () {return 30;}","city":"New York"}