passing parameters in http GET using angular 2

Question

How do i send parameters in GET call using angular 2 I tried in the following way, but getting some error saying,

Argument of type '{ params: URLSearchParams; }' is not assignable to parameter of type 'RequestOptionsArgs'.
  Object literal may only specify known properties, and 'params' does not exist in type 'RequestOptionsArgs'.

function call:

import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http';
import 'rxjs/Rx';

 constructor(private nav: NavController, public http: Http) {
    onLogin(value: string): void { 
        if(this.authForm.valid) {
          this.userData.login();
          let params = '';
          let options = new RequestOptions({
              // Have to make a URLSearchParams with a query string
              params: new URLSearchParams('validateUsr=false')
          });
          this.http.get('https://itunes.apple.com/us/rss/topmovies/limit=1/json', options)
          .map(res => res.json())
          .subscribe(
            data => {},
            err => this.logError(err),
            () => this.validateUser()
          );

          this.nav.push(AccountViewPage);
        }
      }

Need to pass the parameres like this,

params: {
   validateUsr: "false"
}

score 24 · Answer 1 · answered May 18 '16 at 07:08

24

If you want to send query parameters within a GET request, use the search attribute instead of the params one:

constructor(private nav: NavController, public http: Http) {
}

onLogin(value: string): void { 
    if(this.authForm.valid) {
      this.userData.login();
      let params = '';
      let options = new RequestOptions({
          // Have to make a URLSearchParams with a query string
          search: new URLSearchParams('validateUsr=false') // <-----
      });
      this.http.get('https://itunes.apple.com/us/rss/topmovies/limit=1/json', options)
      .map(res => res.json())
      .subscribe(
        data => {},
        err => this.logError(err),
        () => this.validateUser()
      );

      this.nav.push(AccountViewPage);
   }
}

answered May 18 '16 at 07:08

Thierry Templier

198,364
44
396
360

4

in case you are wondering where to retrieve URLSearchParams from: import { URLSearchParams } from '@angular/http'; – emp Sep 02 '16 at 15:39
what if i have an JS param object?? – Toolkit Dec 06 '16 at 14:02
@Toolkit Take a look at my answer below if you want to pass a JS param object. The JS params object can't be used directly in the GET request, but it can be used to build up the params object that can be used. – jbgarr Dec 06 '16 at 22:38
1

why use search attribute instead of params? – Eric Huang Dec 05 '17 at 09:47

score 11 · Answer 2 · edited May 23 '17 at 12:34

Thierry's answer is great, but in case folks are looking to create a function that can accept a JS object of params to be passed, I wanted to add an expanded option. In the following function, data is an optional JS object of key/value pairs that can be passed to the function. It will then be iterated over and each key/value pair will be added to the URLSearchParams helper object (params). Once the params object is built up, it can be handed off to the GET request as the search property under the RequestOptions object (options).

handleGet(service:string, data?:any):Observable<any[]> {
    let params = new URLSearchParams();
    for(let key in data) {
        params.set(key, data[key]);
    }
    let options = new RequestOptions({
        search: params
    });
    return this._http.get(service, options)
        .map(this._extractData)
        .catch(this._handleError)
        .finally(() => {
            // do something...
        });
}

passing parameters in http GET using angular 2

2 Answers2