Working with JSON in JavaScript

JSON (JavaScript Object Notation) is the standard format for sending and receiving data on the web. This page explains what it looks like and how to parse and create it in JavaScript.

What is JSON?

JSON is a lightweight data format that is easy for humans to read and for machines to parse. It is built on two structures:

1. A collection of name/value pairs (an object in JavaScript).
2. An ordered list of values (an array).

JSON is language-independent, but the syntax will feel familiar if you already know JavaScript.

JSON syntax

A JSON object sits inside curly braces {}. Each key/value pair is separated by a comma; the key and value are separated by a colon.

Example – JSON object:

{
    "name": "Alice",
    "age": 25,
    "isStudent": false
}

JSON arrays sit inside square brackets [] and can hold multiple objects.

Example – JSON array:

[
    {
        "name": "Alice",
        "age": 25
    },
    {
        "name": "Bob",
        "age": 28
    }
]

Parsing and stringifying JSON

In JavaScript you will mostly do two things: turn a JSON string into an object, and turn an object into a JSON string.

JSON.parse()

JSON.parse() converts a JSON string into a JavaScript object.

Example – parsing JSON:

let jsonString = '{"name": "Alice", "age": 25}';
let user = JSON.parse(jsonString);

console.log(user.name);  // Outputs: Alice

JSON.stringify()

JSON.stringify() does the opposite – it converts a JavaScript object into a JSON string.

Example – stringifying an object:

let user = {
    name: "Alice",
    age: 25
};

let jsonString = JSON.stringify(user);
console.log(jsonString);  // Outputs: '{"name":"Alice","age":25}'

Working with JSON in web APIs

Most web APIs return JSON. You send a request to a URL and get a JSON response back.

Example – Fetch API:

fetch('https://api.example.com/data')
    .then(response => response.json())  // Converts the response to JSON
    .then(data => {
        console.log(data);
    })
    .catch(error => console.error('Error:', error));

Handling complex JSON structures

JSON can be nested – objects inside objects, arrays inside objects, and so on. You need to know the structure before you can pull out the values you want.

Example – accessing nested JSON:

let userData = {
    "name": "Alice",
    "age": 25,
    "address": {
        "street": "123 Main St",
        "city": "Anytown"
    }
};

console.log(userData.address.city);  // Outputs: Anytown

JSON and storage

JSON is also used to store data in the browser via Web Storage (localStorage and sessionStorage).

Example – storing data with localStorage:

localStorage.setItem('user', JSON.stringify(user));

let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);

Best practices

1. Validate JSON data: Check that API responses match the structure you expect before using them.
2. Error handling: Wrap JSON.parse() in error handling – bad data will throw.
3. Readable formatting: When displaying JSON, format it so nested structures are easy to read.
4. Secure data handling: Be careful with sensitive data in JSON, especially when storing or sending it over the web.

JSON is everywhere in web development. Once you are comfortable with parse, stringify, and reading nested structures, exchanging data between your app and a server becomes straightforward.