What Is JSON and How Web Apps Exchange Data

JSON in a nutshell

JSON (JavaScript Object Notation) is a text format for transferring data. It looks like a JavaScript object, but it is just a string that almost any language can read: Python, PHP, Go, Java, C#.

When an online store shows a product list, the browser most often receives it from the server as JSON:

{
  "id": 42,
  "name": "Backpack",
  "price": 349000,
  "inStock": true,
  "tags": ["school", "sport"],
  "discount": null
}

Syntax and data types

JSON has only six types:

Strict rules that set JSON apart from JavaScript:

• Keys use double quotes only: {"name": "Ali"}, not {name: 'Ali'}.
• Strings use double quotes only.
• No trailing commas after the last item.
• No comments.
• No undefined, functions, dates or NaN. Dates are sent as strings, usually in ISO 8601: "2026-03-15T10:00:00Z".

How frontend and backend exchange JSON

The usual cycle:

1. The frontend turns an object into a string: JSON.stringify().
2. It sends the string in the HTTP request body with the Content-Type: application/json header.
3. The server parses the string back into an object, processes it and replies with JSON too.
4. The frontend parses the response: response.json() or JSON.parse().

const res = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 42, qty: 2 }),
});

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

const order = await res.json();

On an Express server one line, app.use(express.json()), does the same job: it reads request bodies with the right header and puts the result into req.body.

Common parsing errors

• Unexpected token < in JSON — HTML arrived instead of JSON. Usually a 404 or 500 error page, a wrong API URL, or a redirect to a login page. Check the Network tab in DevTools.
• Unexpected end of JSON input — an empty response, such as status 204, or a truncated body. Do not call res.json() when there is no body.
• Single quotes or a trailing comma — the JSON was built by hand with string concatenation. Always use JSON.stringify.
• The server does not see the request body — the Content-Type: application/json header or the parsing middleware is missing.
• Large numbers lose precision — numbers above Number.MAX_SAFE_INTEGER get rounded in JavaScript. Send large IDs as strings.
• Dates arrive as strings — that is expected. Convert them to Date where you need them.

A good habit is to check res.ok and the response Content-Type before parsing, and to validate incoming data on the server against a schema.

JSON vs XML vs form data

How to choose:

• Regular API — JSON.
• File uploads — multipart/form-data, with metadata in a neighboring field.
• Integration with a legacy system that only speaks XML — XML, there is no choice.