What JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more actually is

JSON (JavaScript Object Notation) looks almost exactly like a JavaScript object literal, but there are important differences. JSON is a string format, a text representation of data. It is not a JavaScript object. It cannot hold functions, undefined values, or real Date objects.

// A JavaScript object (in memory)
const user = {
  name: 'Alice',
  age: 30,
  isActive: true
};

// Convert to a JSON string (for sending over the network or storing)
const jsonString = JSON.stringify(user);
// Result: '{"name":"Alice","age":30,"isActive":true}'

// Convert back from a JSON string to a JavaScript object
const parsedUser = JSON.parse(jsonString);
// Result: { name: 'Alice', age: 30, isActive: true }

Think of JSON.stringify and JSON.parse as packing and unpacking a box. You pack your object into a flat text string to ship it, and unpack it on the other end to use it again.

Reading JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more from an APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more response

When you call response.json(), it reads the raw text of the response body and runs JSON.parse() on it for you. The result is a real JavaScript object you can work with immediately.

const response = await fetch('https://api.example.com/user/1');
const user = await response.json();

// user is now a plain JavaScript object
console.log(user.name);  // 'Alice'
console.log(user.email); // 'alice@example.com'

What survives the JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more round trip

Not everything can be serialized to JSON and back. This is a common source of subtle bugs, especially when AI generates code that assumes Date objects survive.

const data = {
  name: 'Alice',
  createdAt: new Date('2024-01-15'),
  callback: () => console.log('hi'),
  metadata: undefined
};

const parsed = JSON.parse(JSON.stringify(data));
// { name: 'Alice', createdAt: '2024-01-15T00:00:00.000Z' }
// callback and metadata are gone, createdAt is now a string

Sending JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more in a request body

When you POST or PUT data to an APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more, you need to manually stringify your object and set the Content-Type header so the server knows what format it's receiving.

const newUser = {
  name: 'Bob',
  email: 'bob@example.com'
};

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'  // Required: tell the server what's coming
  },
  body: JSON.stringify(newUser)           // Required: convert object to string
});

const createdUser = await response.json();

Missing either the header or the JSON.stringify call are the two most common mistakes when sending data. The header tells the server how to interpret the body; the stringify converts your object into something that can actually travel over the wire as text.

Navigating complex JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more structures

Real APIs rarely return flat objects. You'll deal with nested objects, arrays of objects, and arrays nested inside objects.

// Nested objects
const data = {
  user: {
    id: 1,
    profile: {
      name: 'Alice',
      settings: { theme: 'dark' }
    }
  }
};

const theme = data.user.profile.settings.theme; // 'dark'

// Arrays of objects (very common in API responses)
const response = await fetch('https://api.example.com/posts');
const posts = await response.json(); // posts is an Array

posts.forEach(post => console.log(post.title));

const specificPost = posts.find(p => p.id === 5);

Parsing JSONWhat is json?A text format for exchanging data between systems. It uses key-value pairs and arrays, and every programming language can read and write it. Ask AI for more safely

JSON.parse() throws if the input is not valid JSON. If you're parsing untrusted input (from localStorage, a legacy APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more, or user input), wrap it in a try/catch.

function safeJSONParse(jsonString, defaultValue = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('Invalid JSON:', error);
    return defaultValue;
  }
}

const data = safeJSONParse(maybeJsonString, []);

Quick reference