How to Read and Write JSON

// Parsing: string → object
const jsonString = '{"name": "Alice", "age": 28}';
const user = JSON.parse(jsonString);
console.log(user.name); // "Alice"

// Serialization: object → string
const data = { name: "Bob", skills: ["JS", "Python"] };
const output = JSON.stringify(data);
console.log(output); // '{"name":"Bob","skills":["JS","Python"]}'

// Pretty-print with 2-space indentation
const pretty = JSON.stringify(data, null, 2);
console.log(pretty);
// {
//   "name": "Bob",
//   "skills": [
//     "JS",
//     "Python"
//   ]
// }

function safeJsonParse<T>(text: string): T | null {
  try {
    return JSON.parse(text) as T;
  } catch {
    console.error("Failed to parse JSON:", text.slice(0, 100));
    return null;
  }
}

const result = safeJsonParse<User>(responseBody);
if (result) {
  // use result safely
}

const data = {
  name: "Alice",
  greet: function () {
    return "hi";
  }, // dropped — functions are not valid JSON
  secret: undefined, // dropped — undefined is not valid JSON
  count: NaN, // becomes null
  big: Infinity, // becomes null
};

JSON.stringify(data);
// '{"name":"Alice","count":null,"big":null}'

// Fetching JSON from an API
async function getUsers(): Promise<User[]> {
  const response = await fetch("/api/users");

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  const data: User[] = await response.json();
  return data;
}

// Sending JSON to an API
async function createUser(user: CreateUserInput): Promise<User> {
  const response = await fetch("/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(user),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message);
  }

  return response.json();
}

const json = '{"createdAt": "2024-03-15T10:30:00Z"}';
const obj = JSON.parse(json);

console.log(typeof obj.createdAt); // "string" — NOT a Date object

// Parse it yourself
const date = new Date(obj.createdAt);

const parsed = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
    return new Date(value);
  }
  return value;
});

const a: Record<string, unknown> = { name: "Alice" };
const b: Record<string, unknown> = { name: "Bob", friend: a };
a.friend = b; // circular reference

JSON.stringify(a); // TypeError: Converting circular structure to JSON

// JavaScript numbers are 64-bit floats
// IDs larger than 2^53 lose precision
const json = '{"id": 9007199254740993}';
JSON.parse(json).id; // 9007199254740992 — wrong!

// Solution: use string IDs
const safe = '{"id": "9007199254740993"}';

// This crashes if response, data, or users is missing
const name = response.data.users[0].name;

// Safe access with optional chaining
const name = response?.data?.users?.[0]?.name;

{
  "name": "Alice Chen",
  "age": 28,
  "isStudent": true,
  "graduationDate": null,
  "skills": ["TypeScript", "React", "SQL"],
  "address": {
    "city": "Portland",
    "state": "OR"
  }
}

["one", "two", "three"]

{
  "status": "ok"
}

{
  "data": {
    "id": "usr_abc123",
    "name": "Alice Chen",
    "email": "alice@example.com"
  },
  "meta": {
    "requestId": "req_xyz789",
    "timestamp": "2024-03-15T10:30:00Z"
  }
}

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Email is required",
    "details": [{ "field": "email", "rule": "required" }]
  }
}

{
  "name": "Alice",
  "name": "Bob"
}