Rest api call with id parameter in Angular

Question

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

Just add it on to the end of the serviceApiUrl. Is it your own API? The API would be where the querystring parameters would be handled — abney317
– abney317, Commented Mar 4, 2019 at 16:06

anees · Accepted Answer · 2019-03-04 16:07:24Z

2

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));

answered Mar 4, 2019 at 16:07

anees

3441 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sole Over a year ago

What would my service api be? serviceApiUrl: string = 'api/incident';

Sole Over a year ago

Would it be the same?

Chris Over a year ago

@Sole yes, your serviceApiUrl would still be 'api/incident';

Chris Over a year ago

Return statement for getAll() needs to be return this.http.get<any>(this.serviceApiUrl + "?customer_id=" + customerId )

Chris Over a year ago

You could also write it like: return this.http.get<any>(`${this.serviceApiUrl}?customer_id=${customerId}`)

|

Collectives™ on Stack Overflow

Rest api call with id parameter in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related