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"}