JSON Intro

JSON is a plain-text way to write down data so it can be saved in a file or sent across the internet. It looks a lot like a JavaScript object, which is no accident, but it is only text until a program reads it. This section covers how to write it, read it, create it, load it from a server, and show it on a page.

// What JSON Stands For

JSON stands for JavaScript Object Notation. Its look was borrowed from the object literals you already write, but it is a separate format with its own strict rules. Python, Java, PHP, and almost every other language can read and write it, which is why it became the standard way for programs to swap data.

{
  "name": "Ava",
  "grade": 10,
  "clubs": ["robotics", "chess"],
  "active": true
}

That is one JSON document: a student with a name, a grade, a list of clubs, and a yes-or-no flag. Anyone can read it, and so can a computer.

// JSON Is Text

The most important idea in this section: JSON is a string. Until a program parses it, it has no properties, no methods, and nothing you can reach with a dot. It is just characters.

const text = '{"name":"Ava","grade":10}';
console.log(typeof text);
console.log(text.length);
console.log(text.name);

Single quotes wrap the whole string because the JSON inside needs double quotes around every key (the next lesson explains why). text.name is undefined: a string has no property called name.

// Two Jobs: Text to Value, Value to Text

Two built-in functions on the JSON object move data in each direction:

const student = { name: "Ava", grade: 10 };
const text = JSON.stringify(student);
console.log(text);
const copy = JSON.parse(text);
console.log(copy.name, copy.grade);

The two lessons after the syntax rules cover each function in full. For now, remember the direction: parse reads text into a value, stringify writes a value out as text.

// JSON or a JavaScript Object?

JSON borrowed the look of an object literal but is stricter. Something that is perfectly good JavaScript can be broken JSON:

{ name: 'Ava', }

The line above is a valid JavaScript object but is not valid JSON: the key is unquoted, the string uses single quotes, and there is a comma after the last item. A JSON parser would reject all three.

// Where You Will See JSON

• Web APIs: when a page asks a server for data (weather, scores, products), the answer almost always arrives as JSON
• Settings and config files: tools such as package.json keep their options as JSON
• Saved data: a game can save progress to the browser as a JSON string
• Exports: many apps let you download your data as a .json file

A JSON file ends in .json and is served with the type application/json, so browsers and programs know how to treat it.

// A Realistic Example

Real JSON usually nests: objects inside arrays inside objects. Here a class holds a list of students, and each student is an object:

const text = `{"class":"Coding 1","students":[{"name":"Ava","score":92},{"name":"Ben","score":85}]}`;
const data = JSON.parse(text);
console.log(data.class);
console.log(data.students.length);
console.log(data.students[1].name);

After JSON.parse the result is an ordinary object, so everything you learned in the Objects and Arrays sections applies: dots, brackets, loops, and array methods.

// Why Text?

Two programs on different computers cannot hand each other a live object, because an object only exists inside one running program's memory. They have to agree on a written form instead. JSON won because people can read it, it is small, and every language can parse it.

// The Road Ahead

// Quick Check

const s = '{"a": 1}';
console.log(s.a);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Which line proves the JSON text is a string and not an object?
2. Write a JSON string for a pet with a name, an age, and a list of toys. Parse it and log the second toy
3. Stringify an object, log the text length, then add one more property and compare the length
4. List three kinds of information a website could send you as JSON