How to Handle angular2 http.get request with Query Param?

Hi I Have Tried

    .map((res: Response) => res.json())
    .subscribe(res => this.result = res); 

I am Getting error but if you run this Below URL in Browser we can get JSON Result … I don’t know where I mistaken ???

you need to add param to the base url… http.get(“url”, {params { param1: data1, param2: data2} } )

1 Like

It Shows Some Error When i apply this

My Code

 let params = {'projectid':'-1','Teamid':'-1','RoleId':'-1','status':'1','PID':'-1','mytasks':'0','alltasks':'0','page':'1','row':'15','priorityid':'-1','typeid':'-1'};
    let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('Parameter',   params);

      let options = new RequestOptions({
          method: RequestMethod.Get,
          url: "",
          headers: headers

        this.http.request(new Request(options))
     //   http.get('')
       // http.get()
       .map(res => res.json())
        data => {},
       err => {


TypeScript error: E:/Projects 2016/TaskBean/mytaskbeanapp/app/pages/list/list.ts
(25,37): Error TS2345: Argument of type '{ ‘projectid’: string; ‘Teamid’: string
; ‘RoleId’: string; ‘status’: string; ‘PID’: string; ‘myta…’ is not assignable
to parameter of type ‘string’.
10.3 MB bytes written (2.09 seconds)

$http.get(“”, { params: { username: $scope.details.username, password: $scope.details.password } })

        .success(function (data) {
         .error(function (data) {

please take a look at my sample code

It Seems like angularjs 1

yeah my bad please take a look for the angular 2 of this… what I want to point is the url of your link… you pass the params but as I can see you add also the params to the link you provided…

Worked Out With the Following Code


.map((res: Response) => res.json())


              res => { 
              	var resp = res;


    () => console.log('getUserStatus Complete') // complete

my issue is quite different.
I want to pass a variable as the query param.
i have tried this and the variables is not received on the server.

public currentUser: firebase.User; 
 this.currentUser = user.uid; // i have used this variable and it returs this string 'WVoJxe9CzZOhd3MPsKjbgXkgqgY2'

 this.http.get(''+this.currentUser).map(res => res.json()).subscribe(data => { = data;

meanwhile, if i use the string right away in the url, it works


how do i use the variable as the param?

I would use URLSearchParams.

1 Like

+1 for URLSearchParams, using it in production app deployed as a web app currently and works very well. One thing to note, however, is that you should use the URLSearchParams provided by the @angular/http module, rather than the default implementation, otherwise IE11 will give you all kinds of problems.

1 Like

Thanks for this comment, but I believe IE in general is not supported by Ionic, so there are probably other pitfalls.

Haha, yes there are many :persevere: