How will i pass query parameters to REST API inside a service in an angular application?

Question

I'm trying to pass query parameters inside a service to a REST API.

Example of how i should pass to API.(EXPECTED)

http://localhost:2000/world/123456789/avengers?type=fruits&fields=_all

Have tried as below:

     all(countId) {
        const headers: HttpHeaders = new HttpHeaders({
            "_id" : countId, 
            "content-type" : "application/json"
        });
        let params = new HttpParams();
        params = params.append("type", "fruits");
        params = params.append("fields", "_all");
        const options = {
            headers: headers,
            params: params
        };
        return this.http.put ( "http://localhost:2000/world/123456789/avengers", options )
    }

But i am not able to pass them has query parameters.how will i do that?

Hien Nguyen · Answer 1 · 2019-05-01T11:39:52.370

1

Because HTTP PUT/POST send body without append query string in URL (you can use some library to build query string) so that you need build your URL and option

 * @param url The endpoint URL.
     * @param body The resources to add/update.
     * @param options HTTP options
     *
     * @return An `Observable` of the response, with the response body as a JSON object.
     */
    put(url: string, body: any | null, options?: {}


all(countId) {
        const headers: HttpHeaders = new HttpHeaders({
            "_id" : countId, 
            "content-type" : "application/json"
        });

        const options = {
            headers: headers,
            params: params
        };
        return this.http.put ( "http://localhost:2000/world/123456789/avengers??type=fruits&fields=_all", options)
    }

edited May 01 '19 at 11:39

answered May 01 '19 at 11:16

Hien Nguyen

24,551
7
52
62

http://localhost:2000/world/123456789/avengerstype=fruits&fields=_all....tried will pass like this rather as query parameters....you meant i should add '?' by myself – HK123 May 01 '19 at 11:25
yes!!!..they are getting as query parameters.but, in both query parameters and request payload :| – HK123 May 01 '19 at 11:32
if i remove params from options again same behavior!! – HK123 May 01 '19 at 11:33
1

I found that PUT can not append body in query string, you need append to it manual – Hien Nguyen May 01 '19 at 11:40

score 1 · Accepted Answer · answered May 01 '19 at 14:32

1

You are currently sending your options as the request payload, like you have discovered. If you do not have a payload, you can pass null:

all(countId) {
  // ....
  return this.http.put("...", null, options)
                              ^^^^
}

answered May 01 '19 at 14:32

AT82

71,416
24
140
167

Kenana Reda · Answer 3 · 2019-05-01T10:33:57.463

0

you can either send them as Params

const headers: HttpHeaders = new HttpHeaders({
            "_id" : countId, 
            "content-type" : "application/json"
        });
let params = new HttpParams().set('type',fruits).set('fields',_all);
return this.http.put ( "http://localhost:2000/world/123456789/avengers",{ params: params, headers: headers})

OR you can send Options

let options: HttpOptions;
options.headers = headers;
options.params = params;
return this.http.put ( "http://localhost:2000/world/123456789/avengers", options )

edited May 01 '19 at 10:33

answered May 01 '19 at 10:25

Kenana Reda

430
1
9
24

i tried in both the methods....the parameters are getting passed into "Request payload" rather as "query parameters":( – HK123 May 01 '19 at 10:29
I've update he answer, check plz and add a screenshot for request to be able to have more detials – Kenana Reda May 01 '19 at 10:34
I've tried with your approach and i have edited the question...added screen shot how parameters are getting passed in request payload.rather,in headers and query parameters – HK123 May 01 '19 at 11:17

Amarat · Answer 4 · 2019-05-02T05:59:43.443

/********** This is my component file ***********/

page: any;
error: {};
orderObj: {};

ngOnInit(){
  const type: string = this.route.snapshot.queryParamMap.get('type');
  const fields: string = this.route.snapshot.queryParamMap.get('fields');
  this.orderObj = {'type' : type, 'fields' : fields}

  this.route.paramMap.pipe(
  switchMap((params: ParamMap) =>
    this.cmspageService.getPage(params.get('slug'), this.orderObj)
  )
  ).subscribe(
  (data: any) => this.page = data,
  error => this.error = error
  );
}

/********** this is my service file ***********/

public queryStringUrl : string

getPage(slug: string, data:object){
   if(data){
      this.queryStringUrl = '?';
      let i = 0; 
      for (var p in data) {
       if (data.hasOwnProperty(p)){
        if(i != 0)
        this.queryStringUrl += '&';
        this.queryStringUrl +=  p + '=' + data[p];
      }
      i++;
    }
    //return this.queryStringUrl;
    // alert(this.queryStringUrl);
}

return this.http.get<Page>('http://localhost/dev/blogger/api/page/' + slug + this.queryStringUrl,)
.pipe(
  catchError(this.handleError)
);
}

Referecne link : https://alligator.io/angular/query-parameters/

How will i pass query parameters to REST API inside a service in an angular application?

4 Answers4

Linked