Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

passing parameters in http GET using angular 2 [duplicate]

Tags:

angular

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"
}
like image 454
vishnu Avatar asked May 18 '16 05:05

vishnu


2 Answers

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);
   }
} 
like image 175
Thierry Templier Avatar answered Nov 13 '22 03:11

Thierry Templier


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...
        });
}
like image 11
jbgarr Avatar answered Nov 13 '22 05:11

jbgarr