Platform under construction

JSON & Structured Data

Advanced

JSON

JSON is a text format for structured data. It is how JavaScript objects often travel through APIs, files and storage.

const json = '{"title":"Dashboard","active":true}';
const data = JSON.parse(json);

console.log(data.title);

JSON & Structured Data

JSON is data as text, not JavaScript code.

JSON stands for JavaScript Object Notation, but it is a language-independent data format. APIs, configuration files and browser storage often use it.

JSON looks like JavaScript object syntax, but it is stricter. Property names must use double quotes, strings use double quotes, comments are not allowed and trailing commas are invalid.

Treat JSON as untrusted input when it comes from outside your code. Parse it, validate the shape and then use it as structured data.

Text format

JSON is a string until it is parsed.

Strict syntax

Double quoted keys and strings are required.

Data only

JSON cannot store functions, undefined or comments.

Common API format

JSON is the default shape for many web APIs.

Examples

Structured data code should show the boundary clearly.

Parse and validate shape

const data = JSON.parse(json);

if (typeof data.title !== "string") {
  throw new Error("Invalid record title");
}

Assuming parsed data is safe

const data = JSON.parse(json);

output.textContent = data.title.toUpperCase();

// This fails when title is missing or not a string.

Code patterns

Reusable examples for quick reference.

These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.

Valid JSON object

Keys and string values use double quotes.

const json = '{"title":"Dashboard","active":true}';
const data = JSON.parse(json);

JSON array

JSON can represent ordered lists too.

const json = '["html","css","javascript"]';
const topics = JSON.parse(json);

JSON-compatible values

Use strings, numbers, booleans, null, arrays and objects.

const data = {
  title: "Dashboard",
  count: 3,
  active: true,
  owner: null
};

Validate after parsing

Parsing only checks syntax, not whether the shape is useful.

const data = JSON.parse(json);

if (typeof data.title !== "string") {
  throw new Error("Missing title");
}

Rules that matter

Parse, validate and convert data at the edges.

Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.

JSON is text

Parse it before using it as data.

JSON is not JavaScript

No comments, functions, undefined or trailing commas.

Validate external data

Syntax validity does not prove the data shape is correct.

Use null deliberately

JSON supports null, but not undefined.

Keep data serializable

Dates, Maps and Sets need custom conversion.

Handle parse errors

Invalid JSON throws a SyntaxError.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

JSON is the bridge between JavaScript and external systems. If that bridge is weak, data bugs spread quickly.

Accessibility

Data-driven UI should validate labels and states before rendering them to users.

Production note

Production code should parse JSON at boundaries and validate required fields before business logic uses them.

SEO note

Structured data and page metadata must be valid JSON when embedded for crawlers.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Remove a quote and inspect the parse error.
Change title to a number and inspect the validation message.
Add a count property and render it safely.

Practice assignment

Do this before moving to the next topic.

Write one valid JSON object string.
Parse it with JSON.parse.
Validate one required property.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JSON.