Working with JSON

When working with APIs, databases, or local storage, you’ll often deal with data in JSON format. Understanding how to handle JSON (JavaScript Object Notation) is a must for every JavaScript developer.

In this tutorial, we’ll explore what JSON is, why it’s used, and how to work with it using two key methods: JSON.parse() and JSON.stringify().

What Is JSON?

JSON (JavaScript Object Notation) is a lightweight data format used to store and exchange data between systems. It’s easy for humans to read and easy for machines to parse and generate.

A simple JSON example:

{
  "name": "Harry",
  "age": 22,
  "isStudent": true
}

Although it looks like a JavaScript object, JSON is just a string — not an actual object.

Why Use JSON?

JSON is commonly used when:

Sending or receiving data from a web server (APIs)
Storing data in localStorage or sessionStorage
Exchanging structured information between systems

`JSON.stringify()` — Converting Objects to JSON Strings

JavaScript objects can’t be directly stored or sent over a network. That’s where JSON.stringify() comes in — it converts a JavaScript object into a JSON string.

Example

const user = {
  name: "Abhinav",
  age: 22,
  city: "Delhi"
};
 
const jsonString = JSON.stringify(user);
 
console.log(jsonString);

Output:

{"name":"Abhinav","age":22,"city":"Delhi"}

As you can see, JSON.stringify() turned the object into a single string — which can now be sent to a server or stored in local storage.

Storing JSON in Local Storage

const user = { name: "Riya", age: 21 };
 
localStorage.setItem("user", JSON.stringify(user));

Here, the object is converted into a string before being saved — otherwise, JavaScript wouldn’t be able to store it properly.

`JSON.parse()` — Converting JSON Strings Back to Objects

When you receive JSON data from an API or read it from local storage, it’s a string. To work with it as a normal JavaScript object, use JSON.parse().

Example

const jsonString = '{"name":"Harry","age":22,"city":"Delhi"}';
const user = JSON.parse(jsonString);
 
console.log(user.name); // Output: Harry
console.log(user.age);  // Output: 22

Now you can access user.name or user.age just like any normal object property.

Retrieving JSON from Local Storage

const storedUser = localStorage.getItem("user");
const user = JSON.parse(storedUser);
 
console.log(user.name); // Output: Riya

Advanced Usage: Formatting JSON Output

You can format JSON output using extra parameters in JSON.stringify().

Example:

const user = { name: "Harry", age: 22, city: "Delhi" };
 
const prettyJSON = JSON.stringify(user, null, 2);
 
console.log(prettyJSON);

Output:

{
  "name": "Harry",
  "age": 22,
  "city": "Delhi"
}

Here:

The second argument (null) is for filtering properties (you can ignore it for now).
The third argument (2) adds indentation for readability — great for debugging or logs.

Real-World Example: API Response

When you fetch data from an API, it’s usually returned as JSON. Let’s see how to handle it properly:

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json()) // parse JSON string into JS object
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));