How can I get HttpParams values as JSON object?

Question

I'm using Angular 5 with HttpInterceptors.
I already know I can get each value I want from HttpParams via several methods.

Also - If I want to see all values , I can use the .toString() method

params = new HttpParams()
    .set('page', '2')
    .set('sort', 'name');

console.log(params.toString()); //Returns page=2&sort=name

But in my case I send json objects as parameters :

{
  a:1 , b:[1,2,3] , c:[{...}]
}

I'm using interceptors to log the request parameters , but when I JSON.stringify(req.Params) , I get :

Params={
    "updates": null,
    "cloneFrom": null,
    "encoder": {},
    "map": {}
}

Which doesn't expose the values.

I don't want to see the parameters as a regular form post parameters -( it will be very unclear), but as an object as I've sent it.

Question:

How can I extract the parameters from the request object in the interceptor , but as json format :

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
    {
       JSON.stringify( req.params)  // <--- ?? doesn't yield the params.
   }

can you post how you add those objects to the `HttpParams` object? — messerbill, Feb 22 '18 at 16:00
That's because they are lazy. See also https://stackoverflow.com/questions/46418746/angular-httpinterceptor-not-changing-header/46418968#46418968 — yurzui, Feb 22 '18 at 16:04
@yurzui Hi. If so , how can I eagerly extract them as Json.stringify ? — Royi Namir, Feb 22 '18 at 16:05
@messerbill Why ? I 've showed you how I send the parameters ... no ? — Royi Namir, Feb 22 '18 at 16:07
@messerbill Oh ok - this is the actual invocation ( sample) : https://i.imgur.com/EelSQU8.jpg — Royi Namir, Feb 22 '18 at 16:09
update your code instead of posting images.....somebody with 68k Rep should know this. — messerbill, Feb 22 '18 at 16:10
@messerbill Because(!) it doesn't relate the the question. the parameters *are there* , it's just that I can't extract them. And it's not relates to reputation.Why does it matter how I send them , if i'm showing that they are already there ??? — Royi Namir, Feb 22 '18 at 16:11
`console.log(JSON.stringify(params.keys().map(x =>({ [x]: params.get(x)}) )));` — yurzui, Feb 22 '18 at 16:11

score 5 · Accepted Answer · answered Feb 22 '18 at 16:17

5

If you don't like method toString() that returns an encoded string, where key-value pairs (separated by =) are separated by &s you can write your own method that will transform data stored in Map in some data you want to use.

For example:

const params = new HttpParams()
  .set('page', '2')
  .set('sort', 'name');

const paramsArray = params.keys().map(x => ({ [x]: params.get(x) }));

console.log(JSON.stringify(paramsArray));

It's similar to the approach that is used in toString method https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts#L177-L186

Ng-run Example

answered Feb 22 '18 at 16:17

yurzui

205,937
32
433
399

1

Oh my god I was so wrong. [I send POST so I should've investigate `req.body` and not `req.params`](https://i.imgur.com/eTvhF9I.jpg) . thank you yurzui. Like always. ( _btw it worked without looping , straight json.stringify on req.body.params_) – Royi Namir Feb 22 '18 at 16:27
Do you know the reason for why `req.body.params` is not lazy , while `req.params` is ? It doesn't make any sense ( to me) – Royi Namir Feb 22 '18 at 18:39
`Bodies are not enforced to be immutable, as they can include a reference to any user-defined data type. However, interceptors should take care to preserve idempotence by treating them as such.` https://github.com/angular/angular/blob/master/packages/common/http/src/request.ts#L80-L86 – yurzui Feb 22 '18 at 18:44
Oh , it's jsut copy paste char from [here](https://www.google.com/search?q=thank+you+unicode&rlz=1C1NHXL_iwIL704IL704&oq=thank+you+unicode&aqs=chrome..69i57j0l5.2934j0j4&sourceid=chrome&ie=UTF-8) – Royi Namir Feb 22 '18 at 18:46

Melroy van den Berg · Answer 2 · 2018-05-01T23:47:36.883

2

What you actually requested was a JSON Object. So this is how you get such an object:

const params = new HttpParams()
  .set('page', '2')
  .set('sort', 'name');

const paramsObject = params.keys().reduce((object, key) => {
    object[key] = params.get(key)
    return object
}, {})
console.log(paramsObject)
// And json if you really want
const json = JSON.stringify(paramsObject)

edited May 01 '18 at 23:47

answered May 01 '18 at 23:40

Melroy van den Berg

2,697
28
31

How can I get HttpParams values as JSON object?

2 Answers2