JavaScript Notes

JSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error Handling

Master JSON in JavaScript: JSON.parse(), JSON.stringify(), working with fetch API, handling errors, nested structures, custom replacers/revivers, and real-world patterns.

Introduction

JSON (JavaScript Object Notation) is a lightweight, text-based data format used to exchange data between servers and web applications. It's the universal language of web APIs — nearly every REST API sends and receives data as JSON.

Despite its name "JavaScript Object Notation," JSON is language-independent and is used in Python, Java, PHP, Go, and virtually every other language. In JavaScript, we use two key methods: JSON.stringify() to convert objects to JSON strings, and JSON.parse() to convert JSON strings back to objects.

JSON Syntax and Data Types

JSON has strict rules — it looks similar to JavaScript objects but is NOT the same:

Example

┌──────────────────────────────────────────────────────────────┐ │ JSON DATA TYPES │ │ │ │ ✅ String "hello", "world" (must use "") │ │ ✅ Number 42, 3.14, -7 │ │ ✅ Boolean true, false │ │ ✅ null null │ │ ✅ Array [1, 2, 3], ["a", "b"] │ │ ✅ Object { "key": "value" } │ │ │ │ ❌ undefined (becomes null or omitted) │ │ ❌ Function (omitted entirely) │ │ ❌ Date (becomes string — needs manual handling) │ │ ❌ Symbol (omitted entirely) │ │ ❌ Infinity (becomes null) │ │ ❌ NaN (becomes null) │ │ ❌ Single quotes 'value' — must be double quotes │ │ ❌ Trailing commas { "a": 1, } — not allowed in JSON │ └──────────────────────────────────────────────────────────────┘

Valid JSON Examples

Example

// Valid JSON object { "id": 1, "name": "Alice", "age": 30, "isActive": true, "score": null, "tags": ["developer", "javascript"], "address": { "city": "Mumbai", "country": "India" } } // Valid JSON array [1, 2, 3, "hello", true, null, {"key": "value"}] // Valid JSON string (a JSON value can be any type at the top level) "hello world" // Valid JSON number 42

JSON.parse() — String to JavaScript Object

JSON.parse() converts a JSON string into a JavaScript value (object, array, number, etc.).

Example

// Basic parse const jsonString = '{"name":"Alice","age":30,"hobbies":["reading","coding"]}'; const user = JSON.parse(jsonString); console.log(user.name); // "Alice" console.log(user.age); // 30 console.log(user.hobbies[0]); // "reading" console.log(typeof user); // "object" console.log(typeof jsonString); // "string"

Output

Alice
30
reading
object
string

Parsing Arrays

Example

const jsonArray = '[1, 2, 3, "hello", true, null]'; const arr = JSON.parse(jsonArray); console.log(arr); // [1, 2, 3, 'hello', true, null] console.log(arr[3]); // "hello" console.log(arr.length); // 6

Output

[1, 2, 3, 'hello', true, null]
hello
6

Parsing Nested Structures

Example

Output

success
Bob
JavaScript developer
admin
1

JSON.stringify() — JavaScript Object to String

JSON.stringify() converts a JavaScript value into a JSON string.

Example

// Basic stringify const user = { name: "Alice", age: 30, hobbies: ["reading", "coding"], isActive: true }; const jsonString = JSON.stringify(user); console.log(jsonString); console.log(typeof jsonString); // "string"

Output

{"name":"Alice","age":30,"hobbies":["reading","coding"],"isActive":true}
string

Pretty Printing with Indentation

Example

const user = { name: "Alice", age: 30, hobbies: ["reading"] }; // 2-space indentation const pretty = JSON.stringify(user, null, 2); console.log(pretty); // 4-space indentation const pretty4 = JSON.stringify(user, null, 4); console.log(pretty4); // Tab indentation const prettyTab = JSON.stringify(user, null, "\t"); console.log(prettyTab);

Output

{
  "name": "Alice",
  "age": 30,
  "hobbies": [
    "reading"
  ]
}
{
    "name": "Alice",
    "age": 30,
    "hobbies": [
        "reading"
    ]
}
{
	"name": "Alice",
	"age": 30,
	"hobbies": [
		"reading"
	]
}

What Gets Lost in JSON.stringify()

Example

const obj = { name: "Alice", // ✅ Kept age: 30, // ✅ Kept score: null, // ✅ Kept (null) active: true, // ✅ Kept tags: ["js", "css"], // ✅ Kept greet: function() { // ❌ Functions are omitted return "Hello!"; }, id: undefined, // ❌ undefined properties are omitted sym: Symbol("id"), // ❌ Symbols are omitted badNum: NaN, // ⚠️ NaN becomes null inf: Infinity, // ⚠️ Infinity becomes null }; const json = JSON.stringify(obj, null, 2); console.log(json);

Output

{
  "name": "Alice",
  "age": 30,
  "score": null,
  "active": true,
  "tags": ["js","css"],
  "badNum": null,
  "inf": null
}

Notice: greet, id, and sym are completely missing! NaN and Infinity become null.

JSON with Fetch API

This is the most common real-world use of JSON in JavaScript:

Example

// GET request — parse incoming JSON async function fetchUsers() { try { const response = await fetch("https://jsonplaceholder.typicode.com/users"); if (!response.ok) { throw new Error(`HTTP Error: ${response.status}`); } // response.json() automatically calls JSON.parse() on the response body const users = await response.json(); users.forEach(user => { console.log(`${user.name} | ${user.email} | ${user.address.city}`); }); return users; } catch (error) { console.error("Failed:", error.message); } } // POST request — stringify outgoing data async function createUser(userData) { try { const response = await fetch("https://jsonplaceholder.typicode.com/users", { method: "POST", headers: { "Content-Type": "application/json" // Tell server we're sending JSON }, body: JSON.stringify(userData) // Convert object to JSON string }); const newUser = await response.json(); console.log("Created user ID:", newUser.id); return newUser; } catch (error) { console.error("Create failed:", error.message); } } fetchUsers(); createUser({ name: "WoHoTech", email: "hello@wohotech.com" });

Output

Leanne Graham | Sincere@april.biz | Gwenborough
Ervin Howell | Shanna@melissa.tv | Wisokyburgh
...
Created user ID: 11

Error Handling — Parsing Invalid JSON

javascript example

// JSON.parse() throws a SyntaxError for invalid JSON
function safeJSONParse(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("Invalid JSON:", error.message);
    return fallback;
  }
}

// Valid JSON
console.log(safeJSONParse('{"name": "Alice"}')); // { name: 'Alice' }

// Invalid JSON (single quotes)
console.log(safeJSONParse("{'name': 'Alice'}")); // null (fallback)

// Invalid JSON (trailing comma)
console.log(safeJSONParse('{"name": "Alice",}')); // null (fallback)

// Invalid JSON (undefined)
console.log(safeJSONParse("undefined"));          // null (fallback)

// Empty string
console.log(safeJSONParse(""));                   // null (fallback)

Output

{ name: 'Alice' }
Invalid JSON: Expected property name or '}' in JSON at position 1
null
Invalid JSON: Expected double-quoted property name in JSON at position 16
null
Invalid JSON: "undefined" is not valid JSON
null
Invalid JSON: Unexpected end of JSON input
null

The `replacer` Parameter — Filtering Properties

Example

const user = { name: "Alice", password: "secret123", // Sensitive! email: "alice@example.com", age: 30, ssn: "123-45-6789" // Sensitive! }; // Array replacer — only include listed properties const safe = JSON.stringify(user, ["name", "email", "age"], 2); console.log(safe); // Function replacer — custom logic per property const filtered = JSON.stringify(user, (key, value) => { if (key === "password" || key === "ssn") return undefined; // Exclude sensitive if (typeof value === "string") return value.toUpperCase(); // Transform strings return value; }, 2); console.log(filtered);

Output

{
  "name": "Alice",
  "email": "alice@example.com",
  "age": 30
}
{
  "name": "ALICE",
  "email": "ALICE@EXAMPLE.COM",
  "age": 30
}

The `reviver` Parameter — Transforming on Parse

Example

// Reviver: transform values during parsing // Great for restoring Date objects, numbers, etc. const apiData = '{"name":"Alice","birthDate":"1995-03-15","score":"42.5"}'; const parsed = JSON.parse(apiData, (key, value) => { if (key === "birthDate") return new Date(value); // Restore Date if (key === "score") return parseFloat(value); // Convert string to number return value; }); console.log(parsed.name); // "Alice" console.log(parsed.birthDate instanceof Date); // true console.log(parsed.birthDate.getFullYear()); // 1995 console.log(typeof parsed.score); // "number" console.log(parsed.score + 10); // 52.5

Output

Alice
true
1995
number
52.5

JSON as a Deep Clone Tool (Limited!)

Example

// ✅ Quick and dirty deep clone (works for simple data) const original = { name: "Alice", address: { city: "Mumbai", zip: "400001" }, hobbies: ["coding", "reading"] }; const clone = JSON.parse(JSON.stringify(original)); // Modifying clone doesn't affect original clone.address.city = "Delhi"; clone.hobbies.push("gaming"); console.log(original.address.city); // "Mumbai" — unchanged ✅ console.log(clone.address.city); // "Delhi" console.log(original.hobbies); // ["coding", "reading"] — unchanged ✅ // ❌ Limitations — these are LOST in JSON deep clone: const complex = { fn: () => "hello", // Lost — functions not in JSON date: new Date(), // Becomes string, not Date object undef: undefined, // Lost map: new Map(), // Becomes {} set: new Set([1, 2]), // Becomes {} }; const lostClone = JSON.parse(JSON.stringify(complex)); console.log(lostClone); // { date: "2026-06-12T..." } — almost everything lost!

Output

Mumbai
Delhi
["coding", "reading"]
{ date: "2026-06-12T00:00:00.000Z" }

For complex objects with Dates, Maps, Sets, use structuredClone() instead:

Example

// ✅ Use structuredClone() for proper deep cloning const obj = { date: new Date(), map: new Map([["key", "val"]]) }; const clone2 = structuredClone(obj); console.log(clone2.date instanceof Date); // true ✅

Common Mistakes ⚠️

Mistake 1: Using Single Quotes in JSON

javascript example

// ❌ INVALID JSON — single quotes not allowed
const badJson = "{'name': 'Alice'}";
JSON.parse(badJson); // SyntaxError!

// ✅ VALID JSON — must use double quotes
const goodJson = '{"name": "Alice"}';
JSON.parse(goodJson); // ✅ { name: 'Alice' }

Mistake 2: Expecting Functions to Survive stringify

Example

const obj = { greet: () => "Hello", name: "Alice" }; const json = JSON.stringify(obj); console.log(json); // {"name":"Alice"} — greet is gone! const back = JSON.parse(json); console.log(back.greet); // undefined — function lost forever

Output

{"name":"Alice"}
undefined

Mistake 3: Not Handling JSON.parse Errors

javascript example

// ❌ Will crash if response is not valid JSON
const data = JSON.parse(apiResponseText);

// ✅ Always wrap in try/catch
try {
  const data = JSON.parse(apiResponseText);
} catch (error) {
  console.error("Invalid JSON from server:", error.message);
}

Mistake 4: Stringifying Circular References

javascript example

// ❌ Circular references throw TypeError
const obj = {};
obj.self = obj; // Circular!
JSON.stringify(obj); // TypeError: Converting circular structure to JSON

// ✅ Use a library or manual replacer for circular structures

Interview Questions 🎯

Q1. What is JSON and why is it used?

JSON (JavaScript Object Notation) is a lightweight, text-based data interchange format. It's used to exchange data between a server and a client because it's human-readable, language-independent, and easy to parse. Virtually all web APIs use JSON for data transfer.

Q2. What is the difference between JSON.parse() and JSON.stringify()?

JSON.parse(string) converts a JSON string → JavaScript value (deserialization). JSON.stringify(value) converts a JavaScript value → JSON string (serialization). You parse incoming data (from an API), and stringify outgoing data (to send to an API).

Q3. What happens when you JSON.stringify() an object with a function?

Functions are completely omitted from the JSON output. JSON doesn't support functions as a data type. If the entire value being stringified is a function, JSON.stringify() returns undefined (not a string).

Q4. What are the JSON data types?

JSON supports: string (in double quotes), number, boolean (true/false), null, array (ordered list), and object (key-value pairs). It does NOT support undefined, functions, Date, Symbol, NaN, Infinity, or Map/Set.

Q5. How do you handle errors when parsing JSON?

Wrap JSON.parse() in a try/catch block. It throws a SyntaxError if the input is invalid JSON. Common causes: single quotes instead of double, trailing commas, undefined values, unquoted keys.

Q6. Can JSON be used as a deep clone method? What are the limitations?

JSON.parse(JSON.stringify(obj)) works as a quick deep clone for simple objects with strings, numbers, booleans, arrays, and plain objects. Limitations: functions are lost, Date objects become strings, undefined values are omitted, Map/Set become {}, circular references throw an error. Use structuredClone() for proper deep cloning.

Q7. What does the third parameter of JSON.stringify() do?

It controls indentation for pretty-printing. Pass a number (spaces) or string (e.g., "\t" for tabs). For example, JSON.stringify(obj, null, 2) produces nicely indented JSON with 2-space indentation.

Key Takeaways 📌

JSON.parse() converts string → object (parsing/deserialization)
JSON.stringify() converts object → string (serialization)
JSON only supports: strings (double-quotes only!), numbers, booleans, null, arrays, objects
Functions, undefined, Symbol, Date, NaN, Infinity are lost or converted in JSON
Always use try/catch around JSON.parse() — invalid JSON throws SyntaxError
fetch().then(r => r.json()) is fetch() + automatic JSON.parse() under the hood
Use JSON.stringify(obj, null, 2) for human-readable pretty printing
JSON deep clone (JSON.parse(JSON.stringify(obj))) works only for simple data

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error Handling.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, asynchronous, json, json in javascript - complete guide: parse, stringify, fetch & error handling

Continue learning this concept

Asynchronous JavaScriptJavaScript Async Await - Complete Guide with Examples & Error HandlingMaster JavaScript async/await syntax, error handling with try/catch, sequential vs parallel execution, and real-world API patterns. Complete guide with diagrams.Asynchronous JavaScriptJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesUnderstand JavaScript Asynchronous JavaScriptJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsMaster JavaScript Asynchronous JavaScriptJavaScript Callbacks - Complete Guide with Callback Hell & PatternsMaster JavaScript callbacks from basics to advanced patterns. Learn callback functions, higher-order functions, callback hell, error-first callbacks, and how callbacks interact with the event loop and task queues.Asynchronous JavaScriptJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesMaster JavaScript Asynchronous JavaScriptJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitMaster JavaScript

PreviousJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/Await NextJavaScript Promise.all, Promise.race, Promise.any, Promise.allSettled — Complete Guide 2026

Introduction

JSON Syntax and Data Types

Valid JSON Examples

JSON.parse() — String to JavaScript Object

Parsing Arrays

Parsing Nested Structures

JSON.stringify() — JavaScript Object to String

Pretty Printing with Indentation

What Gets Lost in JSON.stringify()

JSON with Fetch API

Error Handling — Parsing Invalid JSON

The replacer Parameter — Filtering Properties

The reviver Parameter — Transforming on Parse

JSON as a Deep Clone Tool (Limited!)

Common Mistakes ⚠️

Mistake 1: Using Single Quotes in JSON

Mistake 2: Expecting Functions to Survive stringify

Mistake 3: Not Handling JSON.parse Errors

Mistake 4: Stringifying Circular References

Interview Questions 🎯

Key Takeaways 📌

Continue learning this concept

Introduction

JSON Syntax and Data Types

Valid JSON Examples

JSON.parse() — String to JavaScript Object

Parsing Arrays

Parsing Nested Structures

JSON.stringify() — JavaScript Object to String

Pretty Printing with Indentation

What Gets Lost in JSON.stringify()

JSON with Fetch API

Error Handling — Parsing Invalid JSON

The replacer Parameter — Filtering Properties

The reviver Parameter — Transforming on Parse

JSON as a Deep Clone Tool (Limited!)

Common Mistakes ⚠️

Mistake 1: Using Single Quotes in JSON

Mistake 2: Expecting Functions to Survive stringify

Mistake 3: Not Handling JSON.parse Errors

Mistake 4: Stringifying Circular References

Interview Questions 🎯

Key Takeaways 📌

Continue learning this concept

The `replacer` Parameter — Filtering Properties

The `reviver` Parameter — Transforming on Parse

The `replacer` Parameter — Filtering Properties

The `reviver` Parameter — Transforming on Parse