Start with the idea

JSON is a text format for exchanging data. stringify converts a supported JavaScript value into JSON text; parse reads JSON text back into a value.

Step-by-step lesson notes

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write, and easy for machines to parse. JSON is the standard format for web APIs.

JSON Syntax

{
  "name": "Alice",
  "age": 30,
  "isAdmin": false,
  "address": {
    "city": "New York",
    "zip": "10001"
  },
  "hobbies": ["reading", "coding", "hiking"],
  "spouse": null
}

JSON.stringify and JSON.parse

const user = { name: "Alice", age: 30, active: true };

// JavaScript object → JSON string
const json = JSON.stringify(user);
console.log(json); // '{"name":"Alice","age":30,"active":true}'

// Pretty print
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
// {
//   "name": "Alice",
//   "age": 30,
//   "active": true
// }

// JSON string → JavaScript object
const parsed = JSON.parse(json);
console.log(parsed.name); // "Alice"

// With a reviver function
const dateJson = '{"date": "2024-01-15"}';
const obj = JSON.parse(dateJson, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});
console.log(obj.date instanceof Date); // true

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

const text = '{"title":"JavaScript","lessons":32}';
const course = JSON.parse(text);
console.log(course.title);
console.log(JSON.stringify({ lessons: course.lessons + 1 }));

JavaScript
{"lessons":33}

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

Put the idea to work

Your learning checkpoint

• Explain the example in your own words.
• Complete the challenge before revealing its answer.
• Describe the common mistake and how to avoid it.