Angular Load json data in Restful API

In this article, I am going to show you how to display JSON data. We will fetch the data in JSON format from the RESTful api.

We will follow these steps to do this

Create Angular Project
Create a component name Products
Create a Angular Service to fetch data
Add HTTPClient module to AppModule
Show list of products

Create Angular Project

I am going to use the Angular CLI to create a new project. If you have not already installed Angular CLI please look at this post

We will create a project name stock. You can run the following command in your terminal

ng g service stock

1	ng g service stock

You can open the project with Visusl Studio Code and your project will be like this

Create Products Component

Now I am going to create a component named products and fetched data from the RESTful API is going to be stored in this component
You can run the following command in your terminal

ng generate component products

1	ng generate component products

Angular will generate following files for you

CREATE src/app/products/products.component.css (0 bytes)
CREATE src/app/products/products.component.html (27 bytes)
CREATE src/app/products/products.component.spec.ts (642 bytes)
CREATE src/app/products/products.component.ts (277 bytes)
UPDATE src/app/app.module.ts (483 bytes)

Create a Angular Service

We are going to fetch the data from REST endpoint via Angular Service. You can use the HTTP Client library of Angular to fetch the data

First, we will create our ProductService with following command

 ng g service product

1	ng g service product

This will create the src/app/product.service.ts file where you can add the code to fetch data

You have to import the HttpClient and inject the HttpClient to constrctor.
Then you have the getProducts method which will fetch the products from API. Finally I am going to inject HttpClient to the constructor so that I can use the get method of the HttpClient library inside the getProduct() method

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  apiUrl = 'https://api.github.com/users';
  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get(`${this.apiUrl}?per_page=10`);
  }
}

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

providedIn: 'root'

})

export class ProductService {

apiUrl = 'https://api.github.com/users';

constructor(private http: HttpClient) {}

getProducts() {

return this.http.get(`${this.apiUrl}?per_page=10`);

}

Note:

If you have modules in your app and you do need to access this ProductService from those modules, you have to add this ProductService to app.module.ts file.

Import { ProductService } from './product.service';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
  ],
  providers: [
    ProductService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Import { ProductService } from './product.service';

@NgModule({

declarations: [

// ...

imports: [

// ...

providers: [

ProductService

bootstrap: [AppComponent]

})

export class AppModule {}

Add HTTPClientModule to AppModule

You can add following code to the app.module.ts file

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
...
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule

  ],
 ...
})
export class AppModule { }

...

import { HttpClientModule } from '@angular/common/http';

@NgModule({

...

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

...

})

export class AppModule { }

Show list of products

I need to load the products from src/app/products/products.component.ts. So you can import the ProductService and inject ProductService to constructor then call the getProducts method inside the ngOnInit()

import { Component, OnInit } from '@angular/core';
import {ProductService} from '../product.service'

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products
  constructor(private productService:ProductService) { }

  ngOnInit() {
    this.productService.getProducts().subscribe(data => {
      this.products=data.data;
      console.log(data.data)
  });
  }

}

import { Component, OnInit } from '@angular/core';

import {ProductService} from '../product.service'

@Component({

selector: 'app-products',

templateUrl: './products.component.html',

styleUrls: ['./products.component.css']

})

export class ProductsComponent implements OnInit {

products

constructor(private productService:ProductService) { }

ngOnInit() {

this.productService.getProducts().subscribe(data => {

this.products=data.data;

console.log(data.data)

});

}

Now you can edit the src/app/products/products.component.html with following code using ngFor directive

<ul>
  <div *ngFor="let product of products">
    {{ product.name }} 
  </div>
</ul>

<ul>

</div>

</ul>

Finally you can update thesrc/app/app.component.html file with following code

<div style="text-align:center">

  <app-products> </app-products>
 
</div>


<router-outlet></router-outlet>

<app-products> </app-products>

</div>

<router-outlet></router-outlet>