Platform under construction

JSON & Structured Data

Advanced

JSON Parse & Stringify

JSON.parse turns JSON text into data. JSON.stringify turns data into JSON text.

const data = { title: "Dashboard", active: true };
const json = JSON.stringify(data, null, 2);

console.log(json);

JSON & Structured Data

parse reads JSON; stringify writes JSON.

Use JSON.parse when data arrives as a JSON string. Use JSON.stringify when you need to send or store structured data as text.

JSON.stringify skips undefined properties and functions. Date objects become ISO strings because Date defines a JSON conversion behavior.

The second and third arguments of stringify can filter and format output. The third argument is useful for readable logs and files.

JSON.parse

Converts valid JSON text into JavaScript data.

JSON.stringify

Converts serializable data into JSON text.

Replacer

Filters or transforms values while stringifying.

Space

Pretty-prints JSON with indentation.

Examples

Structured data code should show the boundary clearly.

Safe parse and readable stringify

try {
  const data = JSON.parse(rawJson);
  console.log(JSON.stringify(data, null, 2));
} catch (error) {
  console.error("Could not parse JSON");
}

Parsing external data without error handling

const data = JSON.parse(rawJson);

// One invalid character can stop the script.

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.

Parse safely

Use try/catch around external JSON.

try {
  const data = JSON.parse(json);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON");
}

Stringify compact

Compact JSON is good for APIs.

const json = JSON.stringify({ title: "Dashboard" });

Pretty-print

Readable JSON helps debugging.

const json = JSON.stringify(data, null, 2);

Replacer filter

Remove fields while converting.

const json = JSON.stringify(data, (key, value) => {
  return key === "internal" ? undefined : value;
});

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.

Wrap external parse calls

Invalid JSON throws immediately.

Use compact JSON for transport

Whitespace is usually unnecessary for API requests.

Use pretty JSON for humans

Indentation makes logs and files readable.

Know what is skipped

undefined, functions and symbols are not represented as object properties.

Convert special types deliberately

Map, Set, BigInt and Date need thought.

Do not stringify circular data

Circular references throw a TypeError.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

Parsing and stringifying are boundary operations. They should be explicit and protected.

Accessibility

If JSON powers visible content, failed parsing should produce a clear message instead of a broken interface.

Production note

Production code should centralize JSON boundary handling so parse errors and missing fields are handled consistently.

SEO note

JSON-LD must stringify cleanly and remain valid when embedded in HTML.

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.

Change the indentation from 2 to 4.
Add a property with undefined and inspect the output.
Add invalid JSON and verify the catch block.

Practice assignment

Do this before moving to the next topic.

Parse one JSON string.
Stringify one object.
Use pretty printing with a space value.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JSON Parse & Stringify.