CODEWITHSUNDEEP
ionic-frameworkangular-httpclient
yardarrat
yardarrat

Reputation: 290

HttpClient append parameter object to GET request

I'm quite the noob using Ionic or Angular for that matter. So as a cheat sheet I'm using the ionic-super-starter template (link below). I am trying to make a get request to my API and it works just find if I'm doing it like this:

this.api.get('user/'+this.user.userId+'/entries?include=stuff&access_token=TOKEN');

but when I put the url params into an object it stops working:

let options = {
  'include':'stuff',
  'access_token':'TOKEN'
}
this.api.get('user/'+this.user.userId+'/entries', options);

The only error I get is "Unauthorized Request" since the options object including the access token was not appended to the url.


In the ionic-super-starter template the providers/api/api.ts calls .set() for each key in my params object:

if (params) {
  reqOpts.params = new HttpParams();
  for (let k in params) {
    reqOpts.params.set(k, params[k]);
  }
}

but according to Angular University this is not possible since "HTTPParams is immutable". If it really was wrong to do this, I don't believe it would be in the ionic template. Nor would I believe that I would be the first person to come across this issue.

However, I am stuck here so any help would be appreciated.



Link to Angular University: https://blog.angular-university.io/angular-http/#httprequestparameters

Link to ionic-super-starter: https://github.com/ionic-team/starters/tree/master/ionic-angular/official/super

Upvotes: 1

Views: 749

Answers (1)

yardarrat
yardarrat

Reputation: 290

I think I figured it out myself:

if I write (in my src/providers/api/api.ts)

reqOpts.params = reqOpts.params.append(k, params[k]);

instead of

reqOpts.params.set(k, params[k]);

it works.

if you are using a loopback API as I am you might have nested objects like:

let options = {
  "filter": {
    "order": "date DESC"
  },
  "access_token":this.user._accessToken
};

this won’t work. try instead:

let options = {
   "filter": '{"order":"date DESC"}',
   "access_token":this.user._accessToken
};

Upvotes: 1

Related Questions