Open In App

How to Create A REST API With JSON Server ?

Last Updated : 15 May, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

Setting up a RESTful API using JSON Server, a lightweight and easy-to-use tool for quickly prototyping and mocking APIs. JSON Server allows you to create a fully functional REST API with CRUD operations (Create, Read, Update, Delete) using a simple JSON file as a data source.

Approach

  • First, Create a JSON file that represents your data model. This JSON file will serve as your database.
  • Run JSON Server and point it to your JSON file using the command npx json-server --watch users.json.
  • Create four different JavaScript files to perform the operations like Create, Read, Update, Delete.
  • To Send a GET Request use the command in the terminal node get_request.js that returns a list of all users stored on the server, Send a POST request to create a new user, this will create a new user with the provided data.
  • Similarly, Send a PUT request to update an existing user. This will update the user with the provided data and for DELETE Request, The endpoint deletes the user with the specified id from the server. After deletion, the user will no longer exist in the database.

Steps to create a REST API with JSON Server

Run the below command to Create a package.json file:

npm init -y

Run the below command to Install the JSON Server globally using npm:

npm i -g json-server

Run the below command to Install Axios:

npm install axios

Project Structure:

Screenshot-2024-05-04-145653

Example: The example below shows the JSON file that represents your data model.

JavaScript
{
    "users": [
        {
            "id": "1",
            "first_name": "Ashish",
            "last_name": "Regmi",
            "email": "ashish@gmail.com"
        },
        {
            "id": "2",
            "first_name": "Anshu",
            "last_name": "abc",
            "email": "anshu@gmail.com"
        },
        {
            "id": "3",
            "first_name": "Shreya",
            "last_name": "def",
            "email": "shreya@gmail.com"
        },
        {
            "id": "4",
            "first_name": "John",
            "last_name": "aaa",
            "email": "John@yahoo.com"
        },
        {
            "first_name": "Geeks For",
            "last_name": "Geeks",
            "email": "gfg@gmail.com",
            "id": "5"
        }
    ]
}

Run the below command to start JSON Server and point it to your JSON file:

npm json-server --watch users.json

GET Request Returns a List of all Users

Example: In this example the endpoint returns a list of all users stored on the server. Each user object contains properties such as id, name, and email.

JavaScript
//get_request.js

const axios = require('axios');

axios.get('http://localhost:3000/users')
    .then(resp => {
        data = resp.data;
        data.forEach(e => {
            console.log(`${e.first_name}, 
            ${e.last_name}, ${e.email}`);
        });
    })
    .catch(error => {
        console.log(error);
    });

Run the below command to test the GET request:

node get_request.js

Output:

Ashish, Regmi, ashish@gmail.com
Anshu, abc, anshu@gmail.com
Shreya, def, shreya@gmail.com
John, aaa, John@yahoo.com
Geeks For, Geeks, gfg@gmail.com

POST Request to create a New User

Example: In this example, Send a POST request to create a new user will create a new user with the provided data.

JavaScript
//post_request.js

const axios = require('axios');

axios.post('http://localhost:3000/users', {
    id: "6",
    first_name: 'Geeks for',
    last_name: 'Geeks',
    email: 'gfg@gmail.com'
}).then(resp => {
    console.log(resp.data);
}).catch(error => {
    console.log(error);
});

Run the below command to test the POST Request:

node post_request.js

Output:

{
      "first_name": "Geeks For",
      "last_name": "Geeks",
      "email": "gfg@yahoo.com",
      "id": "5"
    }

PUT Request to Update an Existing User

Example: In this example, send a PUT request to update an existing user this will update the user with the provided data.

JavaScript
//put_request.js

const axios = require('axios');

axios.put('http://localhost:3000/users/5/', {
    first_name: 'Geeks For',
    last_name: 'Geeks',
    email: 'gfgofficial@gmail.com'
}).then(resp => {

    console.log(resp.data);
}).catch(error => {

    console.log(error);
});

Run the below command to test the PUT Request:

node put_request.js

Output:

{
  first_name: 'Geeks For',
  last_name: 'Geeks',
  email: 'gfg@yahoo.com',
  id: '5'
}

Above data is modified as

{
  first_name: 'Geeks For',
  last_name: 'Geeks',
  email: 'gfgofficial@gmail.com',
  id: '5'
}

DELETE Request to Delete a User

Example: In this example the endpoint deletes the user with the specified id from the server. After deletion, the user will no longer exist in the database.

JavaScript
//delete_request.js

const axios = require('axios');

axios.delete('http://localhost:3000/users/3/')
    .then(resp => {
        console.log(resp.data)
    }).catch(error => {
        console.log(error);
    });

Run the below command to test the PUT Request:

node delete_request.js

Output:

{
  id: '3',
  first_name: 'Shreya',
  last_name: 'def',
  email: 'shreya@gmail.com'
}

Similar Reads

How to create a REST API using json-server npm package ?
This article describes how to use the json-server package as a fully working REST API. What is json-server? json-server is an npm(Node Package Manager) module/package, used for creating a REST API effortlessly. Data is communicated in JSON(JavaScript Object Notation) format between client and server. Installation: Execute the below command in your
4 min read
Why does Vite create multiple TypeScript config files: tsconfig.json, tsconfig.app.json and tsconfig.node.json?
In Vite TypeScript projects you may have noticed three typescript configuration files, tsconfig.json, tsconfig.app.json, and tsconfig.node.json. Each file is used for a different purpose and understanding their use cases can help you manage TypeScript configurations for your project. In this article, you will learn about the three TypeScript config
6 min read
JSON using Jackson in REST API Implementation with Spring Boot
Whenever we are implementing a REST API with Spring (Spring Boot), we would have come across the requirement to exclude NULLs in the JSON Response of the API. Also, there might be a requirement to externalize turning ON/OFF this feature: Exclude NULLS in the JSON Response, thereby allowing the consumer of the API to customize as per the need. In th
3 min read
Difference Between REST API and RPC API
REST and RPC are design architectures widely used in web development to build APIs (Application Programming Interface). It is a set of instructions that permits two systems to share resources and services. The client creates a request to the server that responds to it with data in JSON or XML format. REST APIs It stands for Representational State T
3 min read
Know the Difference Between REST API and RESTful API
APIs (Application Programming Interface) act as an interface between two applications to interact and provide the relevant data. It uses a set of protocols using which the operation is done. Salesforce was the first organization to officially launch API, followed by eBay and Amazon. Also, 60% of transactions made on eBay use their APIs. If we talk
5 min read
Difference between REST API and SOAP API
REST (Representational State Transfer) and SOAP (Simple Object Access Protocol) are the most common methods for communications These services enable web to communicate with the servers with HTTP protocol. REST is architectural style that works over HTTP for communication while SOAP is a protocol with strict standards and is helpful for complex syst
2 min read
How to create a REST API using Java Spring Boot
Representational state transfer (REST) is a software architectural style that defines a set of constraints to be used for creating Web services. Web services that conform to the REST architectural style, called RESTful Web services, provide interoperability between computer systems on the Internet. RESTful Web services allow the requesting systems
6 min read
How to create Covid19 Country wise status project using REST API ?
Today, All Countries in the world fighting with Coronavirus. Every day, Coronavirus cases rising rapidly. It is important for all to keep track of COVID Cases daily and should try to keep himself/herself safe. We have made small web apps that will tell you the total no of cases, new cases, new death, recovery, etc. to the user. You have to just ent
7 min read
REST API using the Express to perform CRUD (Create, Read, Update, Delete)
In this article, we are going to learn how can we build an API and how can we perform crud operations on that. This will be only backend code and you must know JavaScript, NodeJs, Express.js, and JSON before starting out this. This Node.js server code sets up a RESTful API for managing student data. It provides endpoints for performing CRUD (Create
9 min read
Spring - REST JSON Response
REST APIs are becoming popular for the advantages they provide in the development of applications. REST APIs work like a client-server architecture. The client makes a request and a server (REST API) responds back by providing some kind of data. A client can be any front-end framework like Angular, React, etc, or Spring application ( internal/exter
6 min read
Create a chart from JSON data using Fetch GET request (Fetch API) in JavaScript
In this article, we are going to create a simple chart by fetching JSON Data using Fetch() method of Fetch API. The Fetch API allows us to conduct HTTP requests in a simpler way. The fetch() method: The fetch method fetches a resource thereby returning a promise which is fulfilled once the response is available. Syntax: const response = fetch(resou
3 min read
Node.js Building simple REST API in express
Let's have a brief introduction about the Express framework before starting the code section:Express: It is an open-source NodeJs web application framework designed to develop websites, web applications, and APIs in a pretty easier way. Express helps us to handle different HTTP requests at specific routes.As it is NodeJs web framework so make sure
2 min read
REST API in Hyperledger
REST, or Representational State Transfer, is an architectural style for building web services. It is based on a set of principles that define how web resources should be defined, accessed, and manipulated. One of the key principles of REST is the use of the HTTP protocol for communication between clients and servers. This means that REST APIs are b
7 min read
Best Coding Practices For Rest API Design
JSON, Endpoints, Postman, CRUD, Curl, HTTP, Status Code, Request, Response, Authentication, All these words are familiar to you if you are in backend development and you have worked on API (Application Programming Interface). Being a developer you might have worked on some kind of APIs (especially those who are experienced developers). Maybe a paym
10 min read
Why REST API is Important to Learn?
API... Being a developer what comes to your mind first when you listen to this word... JSON, Endpoints, Postman, CRUD, Curl, HTTP, Status Code, Request, Response, Authentication, or something else... If you're familiar with the above word then surely you might have worked on some kinds of APIs (especially those who are experienced developers) in yo
8 min read
Consuming a Rest API with Axios in Vue.js
Many times when building an application for the web that you may want to consume and display data from an API in VueJS using JavaScript fetch API, Vue resource, jquery ajax API, but a very popular and most recommended approach is to use Axios, a promise-based HTTP client. Axios is a great HTTP client library. Similar to JavaScript fetch API, it use
2 min read
Build a Social Media REST API Using Node.js: A Complete Guide
Developers build an API(Application Programming Interface) that allows other systems to interact with their Application’s functionalities and data. In simple words, API is a set of protocols, rules, and tools that allow different software applications to access allowed functionalities, and data and interact with each other.API is a service created
15+ min read
How to generate document with Node.js or Express.js REST API?
Generating documents with Node and Express REST API is an important feature in the application development which is helpful in many use cases. In this article, we will discuss two approaches to generating documents with Node.js or Express.js REST API. Table of Content Document Generation using PdfKit libraryDocument Generation using Puppeteer libra
3 min read
Spring Boot - How to set a Request Timeout for a REST API
In Microservice architecture, there are multiple microservices available for an application. For the application to work properly necessary services need to communicate with each other. There can be communication of messaging type or REST calls. How does REST API Work?In REST Calls the process is synchronous, which means suppose a service SERV1 is
7 min read
Build a document generator with Express using REST API
In the digital age, the need for dynamic and automated document generation has become increasingly prevalent. Whether you're creating reports, invoices, or any other type of document, having a reliable system in place can streamline your workflow. In this article, we'll explore how to build a Document Generator using Node and Express, two powerful
2 min read
REST API Introduction
REpresentational State Transfer (REST) is an architectural style that defines a set of constraints to be used for creating web services. REST API is a way of accessing web services in a simple and flexible way without having any processing. REST technology is generally preferred to the more robust Simple Object Access Protocol (SOAP) technology bec
5 min read
HTTP REST API Calls in ElectronJS
ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. We already know about the importance of HTTP REST
13 min read
Consuming a REST API ( Github Users ) using Fetch - React Client
In this article, you will learn to develop a React application, which will fetch the data from a REST API using Fetch. We will use GitHub Users API to fetch the user's public information with their username. You can find the API reference and source code links at the end of this article. Prerequisites:NodeJS or NPMReactJSSteps to Create the React A
3 min read
REST API Call to Get Location Details in Vue.js
In this article, we will know the REST API call to get the location details in VueJS, along with understanding its implementation through the examples. VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries
7 min read
What is an Idempotent REST API?
Idempotent REST API means that if the same request is made a number of times then it will have the same impact as making the request just once. Lastly, the idempotent characteristic is essential for creating dependable and linear web services when clients might attempt to send the same request multiple times due to network instability. This is due
7 min read
What is REST API in Node.js ?
REST (Representational State Transfer) is an architectural style for designing networked applications. A RESTful API is an API that adheres to the principles of REST, making it easy to interact with and understand. In this article, we'll explore what REST API is in the context of Node.js, its principles, and how to create one. Table of Content Unde
11 min read
How to Build a REST API with Next.js 13?
Next.js is the most widely used React framework. Next.js 13.2 introduced a new file-based routing mechanism, called App Router, for building React frontend and serverless backend. In this article, we will be building a simple REST API using Next.js Route Handlers Table of Content Next.js Route HandlersNext.js project initializationBuilding REST API
7 min read
Building a REST API with PHP and MySQL
This brief tutorial is a step-by-step guide on how to develop a REST API using PHP and MySQL. REST API will implement HTTP commands (Get, Post, Put, DELETE) and response will be in form of JSON. For development setup, we will be using the XAMPP while for testing of the API, we will use the Postman app. Steps to Build REST API with PHP and MySQLStep
4 min read
GitHub REST API
The GitHub REST API allows developers to interact with GitHub programmatically, enabling you to manage repositories, handle issues, automate workflows, and integrate GitHub with other tools and platforms. Whether you're building an application, automating repetitive tasks, or just curious about how GitHub works behind the scenes, the REST API is a
4 min read
REST API Endpoints For Git Tags
In Git, tags are used to mark specific commits as important, typically signifying a release. Unlike branches, tags are immutable references, making them perfect for marking stable points in your repository’s history, such as version releases. Why Use REST API for Git Tags?Interacting with Git tags via REST APIs allows for easy integration with CI/C
3 min read
three90RightbarBannerImg