File formats

JSON: your best friend

Data on the web comes in many flavors. The good news is that one of them is much friendlier than the rest: JSON.

If you have any say about the format of your data, ask for JSON. It is the format of the web, the format most APIs already return, and the easiest one to use in a JavaScript app.

What is JSON?

JSON stands for JavaScript Object Notation. It is a plain text format that looks almost exactly like a JavaScript object:

{
  "country": "France",
  "value": 9,
  "regions": ["Île-de-France", "Bretagne"]
}

The web is full of services that produce JSON. Most public APIs (OpenWeather, GitHub, NASA, Wikipedia, ...) speak JSON natively.

If you want to explore a JSON file visually, paste it into ToDiagram. It renders any JSON as a graph of nested objects, which is great for spotting the shape of an unfamiliar dataset.

A JSON file visualized with ToDiagram.

Using JSON in a React app

Since JSON is just text shaped like a JS object, getting it into your code is easy. You have two main options.

1. Paste it into a const. Copy the JSON, paste it into a .js file, and prefix it with const data =.

const data = [
  { country: 'USA', value: 12 },
  { country: 'France', value: 9 },
  { country: 'Japan', value: 7 },
];

This is what we have been doing throughout the course. It is perfect for small static datasets and there is nothing to install or fetch.

2. Import the JSON file directly. Bundlers like Vite and Next.js let you import a .json file just like a JS module:

import data from './data.json';

The data is loaded at build time, no async code needed. Use this when you want to keep your data separated from your code.