• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JSON Server

← Previous Next →

When developing web applications, especially front-end projects, you often need to work with APIs to fetch or send data. However, in many cases, you might not have a ready-made backend API. This is where JSON Server comes in. It allows you to simulate a REST API using a simple JSON file, so you can practice fetching, adding, updating, and deleting data without a real backend.

What is JSON Server?

JSON Server is a Node.js tool that lets you create a full fake REST API using a single JSON file.

  • You can simulate GET, POST, PUT, PATCH, and DELETE requests.

  • It’s perfect for prototyping, testing front-end applications, or practicing API calls.

  • No backend coding is required — you just define your data in a JSON file.

Installing JSON Server

To use JSON Server, you need Node.js installed on your system. Once Node.js is ready, you can install JSON Server globally using npm:

npm install -g json-server

This makes the json-server command available in your terminal.

You can verify the installation:

json-server --version

Creating a JSON File

JSON Server uses a simple JSON file to store data. Let’s create a file called db.json:

{
  "users": [
    { "id": 1, "name": "Vicky", "age": 28 },
    { "id": 2, "name": "Sanjana", "age": 26 }
  ],
  "tasks": [
    { "id": 1, "task": "Learn JavaScript", "done": true },
    { "id": 2, "task": "Build a website", "done": false }
  ]
}

Here:

  • "users" and "tasks" are collections.

  • Each item in the array has an id for easy reference.

Starting JSON Server

To start the server, run the following command in the terminal where your db.json is located:

json-server --watch db.json

By default, JSON Server runs on http://localhost:3000/.

Now you can access your data using these endpoints:

  • GET http://localhost:3000/users → Fetch all users

  • GET http://localhost:3000/users/1 → Fetch user with id 1

  • GET http://localhost:3000/tasks → Fetch all tasks

Making API Requests

Once the server is running, you can use fetch() in JavaScript to interact with it.

Fetch All Users

fetch("http://localhost:3000/users")
  .then(response => response.json())
  .then(data => console.log(data));

Output:

[
  { "id": 1, "name": "Vicky", "age": 28 },
  { "id": 2, "name": "Sanjana", "age": 26 }
]

Fetch a Single User

fetch("http://localhost:3000/users/1")
  .then(response => response.json())
  .then(user => console.log(user.name));

Output:

Vicky

Adding Data (POST Request)

You can add new users or tasks using POST:

fetch("http://localhost:3000/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Amit", age: 30 })
})
.then(response => response.json())
.then(data => console.log(data));

The new user will be added to the db.json file automatically with a new id.

Updating Data (PUT / PATCH Request)

To update data, you can use PUT (replace the object) or PATCH (update specific properties).

// Update user with id 2
fetch("http://localhost:3000/users/2", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ age: 27 })
})
.then(response => response.json())
.then(data => console.log(data));

Now Sanjana’s age is updated to 27 in the JSON file.

Deleting Data (DELETE Request)

You can remove an item using DELETE:

fetch("http://localhost:3000/users/1", {
  method: "DELETE"
})
.then(() => console.log("User deleted"));

The user with id=1 will be removed from the db.json file.

Benefits of JSON Server

  1. Quick setup — no backend coding needed.

  2. Supports full CRUD operations — GET, POST, PUT, PATCH, DELETE.

  3. Works with any front-end framework — React, Vue, Angular, or plain JavaScript.

  4. Simulates real API responses — including arrays, nested objects, and pagination.

  5. Easy to reset — just modify the db.json file.

Tips for Working with JSON Server

  • Use unique IDs for every object to avoid conflicts.

  • Nested objects and arrays are supported, but keep JSON readable.

  • Pagination can be simulated using _page and _limit query parameters:

GET http://localhost:3000/users?_page=1&_limit=2

  • Filtering is possible using query parameters:

GET http://localhost:3000/users?age=28

  • Sorting is also supported:

GET http://localhost:3000/users?_sort=age&_order=desc

Real-World Example: Front-End Practice

Imagine you’re building a task manager app. Instead of waiting for a backend, you can use JSON Server to:

  • Fetch tasks and display them in the browser.

  • Add new tasks using a form (POST).

  • Mark tasks as completed (PATCH).

  • Delete tasks when done (DELETE).

This allows front-end developers to practice API integration without a live server.

Summary of the Tutorial

  • JSON Server lets you simulate a REST API using a single JSON file.

  • It supports GET, POST, PUT, PATCH, DELETE requests.

  • You can fetch, add, update, and delete data in real time.

  • It’s perfect for front-end development, prototyping, and testing.

  • Supports nested objects, arrays, pagination, sorting, and filtering.

  • Quick setup and lightweight — ideal for practice before a real backend is available.

JSON Server bridges the gap between front-end and backend development, allowing you to learn API interactions safely and efficiently.

Practice Questions

  1. Set up a db.json file with a users collection containing at least two users. Fetch all users using JavaScript fetch() and print their names.

  2. Add a new user { "name": "Amit", "age": 30 } to your users collection using a POST request. Verify it was added by fetching all users.

  3. Update the age of the user with id=1 to 29 using a PATCH request. Print the updated user.

  4. Delete the user with id=2 using a DELETE request and confirm by fetching all users.

  5. Create a tasks collection in db.json with at least three tasks. Fetch all tasks and print the ones that are not done.

  6. Add a new task { "task": "Learn JSON Server", "done": false } to the tasks collection using POST.

  7. Update a task’s done status to true using PATCH for the task with id=1.

  8. Fetch all users sorted by age in descending order using the _sort and _order query parameters.

  9. Fetch the first two users using pagination with _page=1&_limit=2. Print their names.

  10. Filter users who are age=28 using a query parameter and print the result.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top