cant send parameter with angular http.get

Question

I am trying to send page number and pagesize to webapi , but no parameter is passed , i have debugedd the app in vs code ,pagingModel has pageSize and PageNumber as member and they both have value, but when I open chrome dev tool there is no paramethere in request url is there something wrong with my code ?

getTasks(pagingModel: IPagingModel): Promise<TaskList> {
    const url = this.taskUrl;
    const params = new URLSearchParams();
    let option: RequestOptions;
     // tslint:disable-next-line:forin
     for (const key in pagingModel) {
      params.set(key, pagingModel[key]);
     }

    option = new RequestOptions( {search: params, params: params});

    return this.http.get(url, option)
               .toPromise()
               .then(response => response.json() as TaskList)
               .catch(this.handleError);
  }

search: params, params: params - Calling both a parameter name and its variable params is a risky road to take. — Koby Douek
– Koby Douek, Commented Aug 27, 2017 at 6:41

Rajez · Accepted Answer · 2017-08-27 06:55:33Z

1

I don't think it is the best way. But also by this way, working.

const url = this.taskUrl;
url += '?';

Object.keys(pagingModel).forEach(key => {
        url += `${encodeURIComponent(key)}=${encodeURIComponent(pagingModel[key])}&`;
    });

return this.http.get(url)
           .toPromise()
           .then(response => response.json() as TaskList)
           .catch(this.handleError);

}

edited Aug 27, 2017 at 6:55

answered Aug 27, 2017 at 6:49

Rajez

4,0771 gold badge16 silver badges21 bronze badges

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

2 Comments

Arash Over a year ago

this works, but I am not sure if this is the best way.

Rajez Over a year ago

@Arash your code is working for me. I just not passed params key, passed only search key. Seems params key is not a valid argument.new RequestOptions({ search: params });. And also can't understand why it is not working for you

Rahul Singh · Accepted Answer · 2017-08-27 07:29:04Z

0

You can try some thing like this using the new HttpClientModule in Angular v4

import {HttpParams} from "@angular/common/http";
const params = new HttpParams()
    .set('pagenumber', '<your para>')
    .set('pagesize', "<your para>");

this.http
    .get("<requrl>", {params}) // mind this you dont have to use res.json() as httpClientModule has .json() by default

we are building the HTTPParams object by chaining set() methods.because HTTPParams is immutable, and its API methods do not cause object mutation. Instead, a call to set will return a new HttpParams object containing the new value properties.

The following wont work

params.set('pagenumber', '<para>')
params.set('pagesize', "<para>");

edited Aug 27, 2017 at 7:29

answered Aug 27, 2017 at 7:09

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

6 Comments

Arash Over a year ago

@angular/common/http"; has no exported member HttpParams

Rahul Singh Over a year ago

@Arash you have to use the http client module instead of http module, add the import to HttpClientModule in imports array of Ngmodule

Arash Over a year ago

same error , @angular/common/htt has no exported memebr HttpClientModule

Rahul Singh Over a year ago

you are using angular v4 or v2 ?

Arash Over a year ago

@angular/cli: 1.2.6 node: 6.9.1 os: win32 x64 @angular/animations: 4.3.4 @angular/common: 4.3.4 @angular/compiler: 4.3.4 @angular/core: 4.3.4 @angular/forms: 4.3.4 @angular/http: 4.3.4 @angular/platform-browser: 4.3.4 @angular/platform-browser-dynamic: 4.3.4 @angular/router: 4.3.4 @angular/cli: 1.2.6 @angular/compiler-cli: 4.3.4 @angular/language-service: 4.3.4

|

Arash · Accepted Answer · 2017-08-27 07:39:29Z

0

my code was fine, I had just to import URLSearchParams

import { Headers, Http, RequestOptions, RequestOptionsArgs, URLSearchParams } from '@angular/http';

I was not importing it before, and I don't know why but v code gave me no error .

answered Aug 27, 2017 at 7:39

Arash

3,7089 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

cant send parameter with angular http.get

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related