Ionic-super-starter: HttpClient append parameter object to GET request

Ionic Framework ionic-v3
1

Hi.
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 ionic-super-starter:

2

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
};
3

is this worth opening an issue for? as far as I can tell the code the ionic guys came up with doesn’t work. But then again I’m not a programmer by trade…

4

You can use:

let params = [];
params[“id”] = 99;
items.get(params).subscribe(…);