JavaScript JSON – Parsing and Creating JSON Data

// Basic parsing
const jsonString = '{"name":"Alice","age":28,"hobbies":["coding","reading"]}';
const user = JSON.parse(jsonString);

console.log(user.name);         // 'Alice'
console.log(user.age);          // 28 (number, not string)
console.log(user.hobbies[1]);   // 'reading'

// Parse all JSON types
JSON.parse('"hello"');   // 'hello' (string)
JSON.parse('42');        // 42 (number)
JSON.parse('true');      // true (boolean)
JSON.parse('null');      // null
JSON.parse('[1,2,3]');   // [1, 2, 3] (array)

// Error handling (always wrap in try/catch!)
function safeParse(text, fallback = null) {
  try {
    return JSON.parse(text);
  } catch {
    return fallback;
  }
}

console.log(safeParse('{"a":1}'));       // {a: 1}
console.log(safeParse('not json'));      // null
console.log(safeParse('bad', {}));       // {}

const user = {
  name: 'Alice',
  age: 28,
  password: 'secret123',  // we want to exclude this
  greet() { return 'Hello'; }, // functions are silently dropped
  createdAt: new Date()
};

// Basic serialisation
const json = JSON.stringify(user);
// '{"name":"Alice","age":28,"createdAt":"2026-06-03T..."}'
// Note: password — wait, it IS included! See replacer below.
// Note: greet() is dropped (functions not in JSON)

// Pretty-print with 2-space indent
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
/*
{
  "name": "Alice",
  "age": 28,
  ...
}
*/

// Replacer as array – whitelist of keys to include
const safe = JSON.stringify(user, ['name', 'age'], 2);
// Only name and age are included — password excluded!

// Replacer as function – called for each key/value
const filtered = JSON.stringify(user, (key, value) => {
  if (key === 'password') return undefined; // exclude
  if (typeof value === 'number') return value * 2; // transform
  return value;
}, 2);

const data = '{"name":"Alice","birthDate":"1998-03-15T00:00:00.000Z","score":42}';

// Reviver: convert date strings to Date objects
const parsed = JSON.parse(data, (key, value) => {
  // ISO date string pattern
  if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
    return new Date(value);
  }
  return value;
});

console.log(parsed.name);      // 'Alice'
console.log(parsed.birthDate); // Date object (not string!)
console.log(parsed.birthDate instanceof Date); // true

// Custom serialisation with toJSON
class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }
  toJSON() {
    // Custom serialisation format
    return `${this.amount} ${this.currency}`;
  }
}
const price = new Money(29.99, 'USD');
console.log(JSON.stringify({ price })); // '{"price":"29.99 USD"}'

// Dates are serialised to ISO 8601 strings by stringify
const event = { title: 'Meeting', date: new Date('2026-06-15') };
const json = JSON.stringify(event);
// '{"title":"Meeting","date":"2026-06-15T00:00:00.000Z"}'

// After parsing, date is a STRING again, not a Date
const parsed = JSON.parse(json);
console.log(typeof parsed.date);     // 'string'
console.log(parsed.date instanceof Date); // false

// Solution 1: reviver (as shown above)
const withDates = JSON.parse(json, (k, v) =>
  typeof v === 'string' && /Z$/.test(v) ? new Date(v) : v
);
console.log(withDates.date instanceof Date); // true

// Solution 2: store timestamps (numbers)
const eventWithTS = { title: 'Meeting', timestamp: Date.now() };
// Numbers survive JSON round-trips perfectly

// Solution 3: use structuredClone for in-memory cloning (preserves Date type)
const clone = structuredClone(event);
console.log(clone.date instanceof Date); // true

const original = {
  name: 'Alice',
  scores: [95, 82, 88],
  address: { city: 'London' }
};

// JSON round-trip deep clone
const clone = JSON.parse(JSON.stringify(original));
clone.address.city = 'Paris';
clone.scores.push(100);

console.log(original.address.city); // 'London' — not affected
console.log(original.scores.length); // 3 — not affected

// JSON clone LIMITATIONS:
const problematic = {
  fn: () => 'hello',    // silently dropped
  undef: undefined,      // silently dropped
  date: new Date(),      // converted to ISO string
  regex: /hello/g,       // converted to {}
  map: new Map([[1,2]]), // converted to {}
  nan: NaN,             // converted to null
  inf: Infinity          // converted to null
};
const lostData = JSON.parse(JSON.stringify(problematic));
console.log(lostData);
// { date: '...string...', regex: {}, map: {}, nan: null, inf: null }
// fn and undef are gone

// Prefer structuredClone for reliable deep cloning
const better = structuredClone(original); // handles Date, Set, Map, etc.

// Standard fetch + JSON parsing
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  const users = await response.json(); // response.json() calls JSON.parse internally
  return users;
}

// Sending JSON in a POST request
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'  // important!
    },
    body: JSON.stringify(userData)
  });
  return response.json();
}

// Safe response parsing with validation
async function safeApiCall(url) {
  try {
    const res = await fetch(url);
    const text = await res.text(); // get raw text first
    let data;
    try {
      data = JSON.parse(text);
    } catch {
      throw new Error(`Server returned non-JSON: ${text.slice(0, 100)}`);
    }
    if (!res.ok) {
      throw new Error(data.message ?? `HTTP ${res.status}`);
    }
    return data;
  } catch (error) {
    console.error('API call failed:', error.message);
    throw error;
  }
}