What Is JSON?

JSON stands for JavaScript Object Notation. It is a text-based format for representing structured data, such as student profiles, product details, or lists of courses.

JSON looks similar to a JavaScript object, but JSON is a data format—not executable JavaScript code.

{
  "name": "Alex",
  "course": "JavaScript",
  "lessonsCompleted": 13,
  "active": true
}

Each property has a key and a value. In JSON, object keys must use double quotation marks.

Understand the Rules of JSON

JSON follows a few strict rules. Objects use curly braces, arrays use square brackets, and object property names must be double-quoted strings.

JSON supports strings, numbers, booleans, null, objects, and arrays.

{
  "title": "Learn JavaScript",
  "lessons": 17,
  "published": true,
  "rating": null,
  "topics": ["HTML", "CSS", "JavaScript"],
  "author": {
    "name": "Alex",
    "role": "Instructor"
  }
}

Unlike JavaScript object literals, JSON does not allow comments, functions, undefined, single-quoted strings, or trailing commas.

Convert JavaScript Data Into JSON

JavaScript includes a built-in method called JSON.stringify(). It converts supported JavaScript values into JSON-formatted strings.

const student = {
  name: "Alex",
  course: "JavaScript",
  completed: 13
};

const jsonString = JSON.stringify(student);

console.log(jsonString);

The result is a string, not an object. It can be transmitted to an API or stored as text.

For readable formatting, add two more arguments:

const pretty = JSON.stringify(student, null, 2);
console.log(pretty);

The third argument specifies the indentation width. Here, 2 means two spaces.

Turn JSON Strings Back Into Data

When JavaScript receives a JSON string, it can use JSON.parse() to convert that text into a JavaScript value.

const jsonText = '{"name":"Alex","score":95}';

const student = JSON.parse(jsonText);

console.log(student.name);
console.log(student.score);

After parsing, you can access object properties using dot notation or bracket notation, just as you learned in Lesson 09.

Work With Collections of Information

Real applications often contain lists of records rather than just one object. JSON can represent arrays of objects, which are especially useful for displaying cards, tables, and directories.

[
  {
    "title": "HTML & CSS",
    "lessons": 17
  },
  {
    "title": "JavaScript",
    "lessons": 17
  }
]

Once parsed, JavaScript can loop through the records and create HTML elements for each course.

const jsonText = '[{"title":"HTML"},{"title":"JavaScript"}]';
const courses = JSON.parse(jsonText);

courses.forEach(function(course) {
  console.log(course.title);
});

This connects JSON to earlier lessons on arrays, objects, loops, and DOM manipulation.

Prevent Parsing Errors From Breaking Your App

Not every JSON string is valid. Missing quotation marks, extra commas, or incomplete braces can cause JSON.parse() to throw a SyntaxError.

Use try...catch to handle invalid JSON gracefully.

const jsonText = '{"name":"Alex",}';

try {
  const data = JSON.parse(jsonText);
  console.log(data);
} catch (error) {
  console.log("Please check your JSON formatting.");
}

Instead of crashing the interaction, your program can display a helpful message and allow the visitor to correct their JSON.

Try the Live JSON Parser

Modify the JSON below, then select Parse JSON. The explorer will validate the syntax and display information from your data.

Experiment with changing values, adding new properties, and introducing syntax errors. Observe how the parser responds.