Skip to main content

Build a JSON REST API

Step 3 — Setting up a (Fake) JSON REST API​

Before we proceed to develop our Angular application, we'll need to prepare a JSON REST API that we can consume using HttpClient.

We can also consume or fetch JSON data from third-party REST API servers but in this example, we choose to create a fake REST API. Check out this tutorial for a real REST API example. As far as Angular concerned, there is no difference between consuming fake or real REST APIs.

As said, you can either use an external API service, create a real REST API server or create a fake API using json-server. In this example we'll use the last approach.

So head over to a new command-line interface and start by installing json-server from npm in your project:

$ cd ~/angular-httpclient-example
$ npm install --save json-server

Next, create a server folder in the root folder of your Angular project:

$ mkdir server
$ cd server

In the server folder, create a database.json file and add the following JSON object:

{
    "products": []
}

This JSON file will act as a database for your REST API server. You can simply add some data to be served by your REST API or use Faker.js for automatically generating massive amounts of realistic fake data.

Go back to your command-line, navigate back from the server folder, and install Faker.js from npm using the following command:

$ cd ..
$ npm install faker --save

At the time of creating this example, faker v4.1.0 will be installed.

Now, create a generate.js file and add the following code:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "<https://source.unsplash.com/1600x900/?product>",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

We first imported faker, next we defined an object with one empty array for products. Next, we entered a for loop to create 300 fake entries using faker methods like faker.commerce.productName() for generating product names. Check all the available methods. Finally we converted the database object to a string and log it to standard output.

Next, add the generate and server scripts to the package.json file:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

Next, head back to your command-line interface and run the generate script using the following command:

$ npm run generate

Finally, run the REST API server by executing the following command:

$ npm run server

You can now send HTTP requests to the server just like any typical REST API server. Your server will be available from the http://localhost:3000/ address.

https://www.diigo.com/file/image/rscqpoqzoceebosqezdspasrrr/Screenshot_13.jpg?k=09fbe087b8cbb43fe7505e357e7a0e23

These are the API endpoints we'll be able to use via our JSON REST API server:

  • GET /products for getting the products,
  • GET /products/<id> for getting a single product by id,
  • POST /products for creating a new product,
  • PUT /products/<id> for updating a product by id,
  • PATCH /products/<id> for partially updating a product by id,
  • DELETE /products/<id> for deleting a product by id.

You can use _page and _limit parameters to get paginated data. In the Link header you'll get first, prev, next and last links.

For example:

GET /products?_page=1 for getting the first page of data, GET /products?_page=1&_limit=5 for getting the first five products of the first page of data.

Note: You can use other features such as filters, sorting and ordering. For more information, check out the docs.

Leave the JSON REST API server running and open a new command-line interface for typing the commands of the next steps.

As a summary of what we have done — We installed Angular CLI and initialized a new project based on the latest Angular 13 version. Then, we created a REST API using json-server based on a JSON file. In the next step of our Angular 13 tutorial, we'll learn how to set up HttpClient in our Angular 13 project.