JavaScript Objects
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
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.
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
javascript
JSON.stringify(object);
JSON.parse(text);stringify goes out, parse comes back in.
This is what you do with data received from an API.
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.
The third argument adds indentation, which helps when reading it.
Example
javascript
const person = { name: "Ada" };
console.log(JSON.stringify(person, null, 2));The number is how many spaces to indent by.
Functions and undefined are dropped entirely.
Dates become strings and do not turn back into dates on their own.
Example
javascript
const data = { name: "Ada", greet: function () {}, missing: undefined };
console.log(JSON.stringify(data));Only name survives the conversion.
Converting out and back gives a copy with no shared nested objects.
It only works for data that JSON can represent.
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.
Always wrap JSON.parse in a try block when the text comes from outside.
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
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>Run the above example in the Try It Editor.
Try formatting it:
Use JSON.stringify(person, null, 2) and look at the spacing.
JSON.stringify turns an object into a string.JSON.parse turns a string back into an object.undefined and dates do not survive the round trip.JSON.parse throws on invalid text, so guard it.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.