Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Objects

JavaScript JSON

Written by Published

JSON is a text format for data, and JavaScript can convert objects to and from it.

JSON.stringify turns an object into a string.

JSON.parse turns that string back into an object.

Example

Example

javascript

const person = { name: "Ada", age: 36 };

const text = JSON.stringify(person);

console.log(text);

The output is a string containing the object's data.

What is JSON?

JSON stands for JavaScript Object Notation.

It is plain text, which means it can be sent over a network or saved to storage.

It looks like a JavaScript object, but every key must be in double quotes.

Syntax

Syntax

javascript

JSON.stringify(object);
JSON.parse(text);

stringify goes out, parse comes back in.

Parsing JSON

This is what you do with data received from an API.

Example

Example

javascript

const text = '{"name":"Ada","age":36}';

const person = JSON.parse(text);

console.log(person.name);

The string becomes a real object with properties you can read.

Formatting the Output

The third argument adds indentation, which helps when reading it.

Example

Example

javascript

const person = { name: "Ada" };

console.log(JSON.stringify(person, null, 2));

The number is how many spaces to indent by.

What JSON Cannot Hold

Functions and undefined are dropped entirely.

Dates become strings and do not turn back into dates on their own.

Example

Example

javascript

const data = { name: "Ada", greet: function () {}, missing: undefined };

console.log(JSON.stringify(data));

Only name survives the conversion.

A Deep Copy Trick

Converting out and back gives a copy with no shared nested objects.

It only works for data that JSON can represent.

Example

Example

javascript

const original = { address: { city: "London" } };
const copy = JSON.parse(JSON.stringify(original));

copy.address.city = "Paris";

console.log(original.address.city);

The original is untouched, unlike a spread copy.

Invalid JSON Throws

Always wrap JSON.parse in a try block when the text comes from outside.

Example

Example

javascript

let result;

try {
  result = JSON.parse("not json");
} catch (error) {
  result = "invalid";
}

console.log(result);

The output is invalid, and the program keeps running.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript JSON</title>
</head>
<body>

  <h1>JavaScript JSON</h1>

  <p id="result"></p>

  <script>
    const person = { name: "Ada Lovelace", year: 1815 };

    const text = JSON.stringify(person);
    const back = JSON.parse(text);

    document.getElementById("result").innerHTML =
      "As text: " + text + "<br>Name back: " + back.name;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try formatting it:

Use JSON.stringify(person, null, 2) and look at the spacing.

Important Points

  • JSON.stringify turns an object into a string.
  • JSON.parse turns a string back into an object.
  • JSON keys must be in double quotes.
  • Functions, undefined and dates do not survive the round trip.
  • JSON.parse throws on invalid text, so guard it.

Conclusion

JSON is how data travels between a browser and a server.

The two methods are simple, but the things JSON cannot hold catch people out.

Understanding JSON is essential before working with any API.

PreviousJavaScript Getters and SettersNextJavaScript Object freeze