How to create HttpParams using object for HTTP request on Angular 4.3 using HttpClient

Question

I have exactly angular version 4.3.2 and I cannot update because of dependencies. So for now I stick to this version. I have object with dynamic params (there can be other keys and values inside):

let query = {
    param1: 1,
    param2: 'a'
}

and I want to do something like:

params = new HttpParams();
params = params.append(query);
return this.httpClient.get(this.config.apiUrl + '/items', {
            params: params,
            headers: headers
        });

but there is not such params.append(query) method. So I need to iterate over the query keys and to add them one by one to the params. Is there easier solution for this?

Edit1:

according this answer this can be done since angular 5.0.0-beta.6 (2017-09-03), but is not solution for me. https://stackoverflow.com/a/46317900/1995258

Nope, seems like that's the way you do it: https://stackoverflow.com/a/45428942/3001761 — jonrsharpe, Oct 10 '17 at 08:31
@jonrsharpe OK, thank you. I haven't found that answer. It's good reference. — makkasi, Oct 10 '17 at 08:36

H S W · Answer 1 · 2021-02-26T12:07:47.547

16

It can be done by using fromObject property

const params = {
    email:'abc@xyz.com',
    password:'qwerty'
}

const body = new HttpParams({fromObject: params})

edited Feb 26 '21 at 12:07

answered Aug 18 '20 at 10:12

H S W

6,310
4
25
36

The value of `fromObject` has type restrictions: either (1) all the keys and values must be strings or (2) it must be a `ReadonlyArray`. cf. https://angular.io/api/common/http/HttpParamsOptions#fromObject – JellicleCat Apr 16 '21 at 02:23

score 5 · Accepted Answer · edited Aug 16 '19 at 18:47

5

I solved it that way:

const params: HttpParams = new HttpParams().set('filters', JSON.stringify(filters));

edited Aug 16 '19 at 18:47

pzaenger

11,381
3
45
46

answered Aug 16 '19 at 18:45

Danilo Santos

76
1
3

1

Object.keys(params).forEach(function (key) { httpParams = httpParams.append(key, JSON.stringify(params[key])); }); – makkasi Sep 16 '21 at 06:05

score 0 · Answer 3 · answered Feb 01 '23 at 06:52

    let query = {
    param1: 1,
    param2: 'a'
}
    params = new HttpParams();
    params = params.appendAll(query);
    return this.httpClient.get(this.config.apiUrl + '/items', {
                params: params,
                headers: headers
            });

You can also achive this way

score 0 · Answer 4 · answered Feb 08 '23 at 10:31

it will be work

let params = new HttpParams();
params = params.append('param1', '1' )
params = params.append('param2', 'a' )

Get URL be like

this.HttpClient.get(this.config.apiUrl + '/items', { params:params}).subscribe(
(response)=>{
   console.log(response)
})

How to create HttpParams using object for HTTP request on Angular 4.3 using HttpClient

4 Answers4