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

Ionic Framework ionic-v3
1

Hi I Have Tried

    http.get('http://192.168.0.26:9000/api/task/counttask?projectid=-1&Teamid=-1&RoleId=-1&status=1&PID=-1&mytasks=0&alltasks=0&page=1&row=15&priorityid=-1&typeid=-1&taskname=&JSON&_=1471520478215')

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

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 ???

http://192.168.0.26:9000/api/task/counttask?projectid=-1&Teamid=-1&RoleId=-1&status=1&PID=-1&mytasks=0&alltasks=0&page=1&row=15&priorityid=-1&typeid=-1&taskname=&JSON&_=1471520478215

2

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

1 Like
3

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: "http://192.168.0.26:9000/api/task/counttask",
          headers: headers
      });

        this.http.request(new Request(options))
     //   http.get('http://192.168.0.26:9000/api/task/counttask?projectid=-1&Teamid=-1&RoleId=-1&status=1&PID=-1&mytasks=0&alltasks=0&page=1&row=15&priorityid=-1&typeid=-1&taskname=&JSON&_=1471520478215')
       // http.get()
       .map(res => res.json())
      .subscribe(
        data => {},
       err => {

        alert(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)

4

$http.get(“http://192.168.1.8/sample/api/v1/userlogin”, { params: { username: $scope.details.username, password: $scope.details.password } })

        .success(function (data) {
             //code
         })
         .error(function (data) {
            //code
        })

please take a look at my sample code

5

It Seems like angularjs 1

6

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…

7

Worked Out With the Following Code

this.http.get(‘http://192.168.0.26:9000/api/task/counttask?projectid=-1&Teamid=-1&RoleId=-1&status=1&PID=-1&mytasks=0&alltasks=0&page=1&row=15&priorityid=-1&typeid=-1&taskname=&isMobile=&userid’)

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

.subscribe(

              res => { 
              	var resp = res;

this.items=JSON.parse(JSON.parse(resp).Data);

     },
     
    () => console.log('getUserStatus Complete') // complete
);
8

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('http://ksbsa.000webhostapp.com/app/api/getEvent.php?search='+this.currentUser).map(res => res.json()).subscribe(data => {
        this.events = data;
        console.log(this.events);     
      });

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

this.http.get('http://ksbsa.000webhostapp.com/app/api/getEvent.php?search=WVoJxe9CzZOhd3MPsKjbgXkgqgY2'

how do i use the variable as the param?

9

I would use URLSearchParams.

1 Like
10

+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
11

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

12

Haha, yes there are many :persevere: