Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

JSON stringify

A common use of JSON is for exchanging data with a web server.

When sending data to a web server, it must be in string format.

Use JSON.stringify() to convert a JavaScript object into a string.

Stringify a JavaScript Object

Suppose we have the following object in JavaScript:

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

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

const myJSON = JSON.stringify(obj);

The result will be a string formatted according to JSON syntax.

myJSON is now a string and is ready to be sent to the server.

Example

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

In the following chapters, you will learn how to send JSON to a server.

Stringify a JavaScript Array

You can also stringify JavaScript arrays.

Suppose we have the following 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 formatted in JSON syntax.

myJSON is now a string and is prepared to be sent to the server.

Example

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

In the upcoming chapters, you will learn how to send a JSON string to a server.

Storing Data

When storing data, it must be in a specific format, and text is always a valid format, regardless of where it is stored.

JSON allows you to store JavaScript objects as text.

Example

Saving 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 permitted. The JSON.stringify() function will convert any date objects into strings.

Example

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

The string can be converted back into a date object on the receiver’s side.

Stringify Functions

In JSON, functions are not permitted as object values.

The JSON.stringify() function will omit any functions from a JavaScript object, including both the key and the value.

Example

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

This can be avoided by converting your functions into strings before using the JSON.stringify() function.

Example

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

If you send functions through JSON, they will lose their scope, and the receiver would need to use eval() to convert them back into functions.