CODEWITHSUNDEEP
javascriptangular
Sole
Sole

Reputation: 3340

Rest api call with id parameter in Angular

I have an Angular app which calls a rest api, but that rest api data is defined by which customer it is like: api/incident?customer_id=7 How would I reflect this in the api url or service? and my app? My service is as follows:

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
    import { HttpClientModule } from '@angular/common/http';
    import { Observable, of, throwError } from 'rxjs';
    import { catchError, retry } from 'rxjs/operators';


    @Injectable({
      providedIn: 'root'
    })
    export class 

nowService {

  serviceApiUrl: string = 'api/incident';

  constructor(
    private http: HttpClient,

  ) { }

  getAll(): Observable<any> {
    return this.http.get<any>(this.serviceApiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }


  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something has happened; Api is not working!'));
  };

}

component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import {HttpClientModule} from '@angular/common/http';
// Services 
import { nowService } from '../../services/servicenow.service';
import { Incidents } from '../../models/incidents.model';


@Component({
  selector: 'app-service-incident',
  templateUrl: './service-incident.component.html',
  styleUrls: ['./service-incident.component.scss']
})

export class ServiceIncidentComponent implements OnInit {

  public incidents: any; 
  public loading = true;
  public errorApi = false;

  constructor(private service: nowService) {

  }

  ngOnInit() {
    this.service.getAll().subscribe((data) => {
      this.loading = true;
      this.incidents = data.result;
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }
}

So it is based on the customer ID parameter. I just want to know how to do this as I have not come across this before?

Thanks

Upvotes: 1

Views: 4192

Answers (1)

anees
anees

Reputation: 344

The code can be as follows:

   getAll(customerId): Observable<any> {
  return this.http.get<any>(this.serviceApiUrl + "?customer_id" + customerId )
    .pipe(
    catchError(this.handleError)
  );


 ngOnInit() {
this.service.getAll(this.customerId).subscribe((data) => {
  this.loading = true;
  this.incidents = data.result;
  this.loading = false;
  console.log('Result - ', data);
  console.log('data is received');
})
}

Or u can use HttpParams class example: https://angular.io/api/common/http/HttpParams

   getAll(customerId): Observable<any> {
         const params = new HttpParams("customer_id", customerId)
       return this.http.get<any>(this.serviceApiUrl ,{ params })
    .pipe(catchError(this.handleError));

Upvotes: 2

Related Questions