Working with JSON

What is JSON?

JSON stands for JavaScript Object Notation. It's a text format for representing structured data — and it's the universal language of web APIs. When a server sends you data, it's almost always JSON.

JSON looks very much like a JavaScript object literal:

{
  "id": 1,
  "name": "Helen Burgess",
  "email": "helen@example.com",
  "active": true,
  "score": null
}

But it's not an object. It's a string. A very structured string — but a string. That's why you need to parse it before you can work with it.

JSON syntax rules

JSON is stricter than JavaScript object notation. A few key differences:

Valid JSON value types are: string, number, boolean, null, array, and object. That's it.

{
  "title": "Espresso Machine",
  "price": 299,
  "inStock": true,
  "discount": null,
  "tags": ["coffee", "appliance"],
  "dimensions": {
    "width": 28,
    "height": 40
  }
}

JSON.parse() — string to object

When you receive JSON from an API, you convert it to a JavaScript object using JSON.parse():

const jsonString = '{"name":"Helen","score":42}';

const user = JSON.parse(jsonString);
console.log(user.name);  // 'Helen'
console.log(user.score); // 42

When you use fetch() and call .json() on the response, this parsing happens for you automatically. But JSON.parse() is useful when you're reading JSON from local storage, a file, or any source that gives you a raw string.

If the string isn't valid JSON, JSON.parse() throws a SyntaxError. It's worth wrapping it in a try/catch when the source isn't guaranteed to be valid:

try {
  const data = JSON.parse(rawString);
  console.log(data);
} catch (error) {
  console.error('Invalid JSON:', error.message);
}

JSON.stringify() — object to string

To go the other direction — converting a JavaScript object into a JSON string — use JSON.stringify():

const user = { name: 'Helen', role: 'admin' };
const jsonString = JSON.stringify(user);

console.log(jsonString);         // '{"name":"Helen","role":"admin"}'
console.log(typeof jsonString);  // 'string'

You saw this in the previous tutorial when sending a POST request:

body: JSON.stringify({ title: 'My post', userId: 1 })

JSON.stringify() also accepts optional arguments for formatting. A third argument of 2 adds readable indentation:

console.log(JSON.stringify(user, null, 2));
// {
//   "name": "Helen",
//   "role": "admin"
// }

Useful for debugging — especially when you're logging complex nested objects.

Navigating nested JSON

API responses are often deeply nested. Here's a realistic example:

{
  "user": {
    "id": 1,
    "name": "Helen",
    "address": {
      "city": "Perth",
      "postcode": "6020"
    },
    "orders": [
      { "id": 101, "total": 89.50, "status": "delivered" },
      { "id": 102, "total": 145.00, "status": "pending" }
    ]
  }
}

Once parsed, you access nested values with dot notation and bracket notation exactly as you would any JavaScript object:

const data = JSON.parse(jsonString);

console.log(data.user.name);              // 'Helen'
console.log(data.user.address.city);     // 'Perth'
console.log(data.user.orders[0].total);  // 89.50
console.log(data.user.orders[1].status); // 'pending'

When a path might not exist, optional chaining (?.) protects you from errors:

console.log(data.user?.phone?.mobile); // undefined — no error thrown

Reshaping data with array methods

API responses rarely arrive in the exact shape your UI needs. You'll almost always need to extract, filter, or transform the data before using it. This is where array methods earn their keep.

map() — transform each item

Use map() to convert an array of objects into a new array of a different shape.

const posts = [
  { id: 1, title: 'First post', body: '...', userId: 1 },
  { id: 2, title: 'Second post', body: '...', userId: 1 },
];

// Extract just the titles
const titles = posts.map((post) => post.title);
console.log(titles); // ['First post', 'Second post']

// Create a simpler object shape for the UI
const summaries = posts.map((post) => ({
  id: post.id,
  heading: post.title,
}));

filter() — keep matching items

Use filter() to return only the items that meet a condition.

const orders = [
  { id: 101, status: 'delivered', total: 89.50 },
  { id: 102, status: 'pending',   total: 145.00 },
  { id: 103, status: 'delivered', total: 32.00 },
];

const delivered = orders.filter((order) => order.status === 'delivered');
// [{ id: 101, ... }, { id: 103, ... }]

const over100 = orders.filter((order) => order.total > 100);
// [{ id: 102, ... }]

find() — get one matching item

Use find() when you need a single item — by ID, for example.

const users = [
  { id: 1, name: 'Helen' },
  { id: 2, name: 'Gordon' },
  { id: 3, name: 'Sue' },
];

const user = users.find((u) => u.id === 2);
console.log(user.name); // 'Gordon'

find() returns the first match, or undefined if nothing matches. Always check before using the result:

const user = users.find((u) => u.id === 99);
if (user) {
  console.log(user.name);
} else {
  console.log('User not found');
}

Combining methods

Methods chain together — and this is where they become powerful:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((posts) => {
    // Get titles of the first 3 posts by user 1
    const result = posts
      .filter((post) => post.userId === 1)
      .slice(0, 3)
      .map((post) => post.title);

    console.log(result);
  });

Common JSON gotchas

1. undefined becomes nothing

JSON.stringify() silently drops properties with undefined values:

const obj = { name: 'Helen', phone: undefined };
JSON.stringify(obj); // '{"name":"Helen"}' — phone is gone

Use null when you want to represent "no value" in JSON.

2. Dates are strings

JSON has no Date type. Dates are serialised as ISO strings:

JSON.stringify({ created: new Date() });
// '{"created":"2026-04-28T01:00:00.000Z"}'

When you parse them back, they're still strings — not Date objects. Convert them explicitly if you need date arithmetic:

const created = new Date(data.created);

3. Numbers can lose precision

JSON handles standard numbers fine, but very large integers (e.g., database IDs from some systems) can lose precision when parsed. This is rarely a problem with typical web APIs, but worth knowing.