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: stackoverflow.com/a/45428942/3001761 — jonrsharpe
– jonrsharpe, Commented Oct 10, 2017 at 8:31
@jonrsharpe OK, thank you. I haven't found that answer. It's good reference. — makkasi
– makkasi, Commented Oct 10, 2017 at 8:36

H S W · Accepted Answer · 2021-02-26 12:07:47Z

20

It can be done by using fromObject property

const params = {
    email:'[email protected]',
    password:'qwerty'
}

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

edited Feb 26, 2021 at 12:07

answered Aug 18, 2020 at 10:12

H S W

7,2544 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jellicle Over a year ago

The value of fromObject has type restrictions: either (1) all the keys and values must be strings or (2) it must be a ReadonlyArray<string>. cf. angular.io/api/common/http/HttpParamsOptions#fromObject

pzaenger · Accepted Answer · 2019-08-16 18:47:40Z

6

I solved it that way:

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

edited Aug 16, 2019 at 18:47

pzaenger

12.1k3 gold badges48 silver badges55 bronze badges

answered Aug 16, 2019 at 18:45

Danilo Santos

861 silver badge3 bronze badges

1 Comment

makkasi Over a year ago

Object.keys(params).forEach(function (key) { httpParams = httpParams.append(key, JSON.stringify(params[key])); });

Panciz · Accepted Answer · 2024-11-09 23:25:24Z

If your object is typed you cannot use fromObject since you will encounter

The value of fromObject has type restrictions: either (1) all the keys and values must be strings or (2) it must be a ReadonlyArray<string>. cf.

I've managed to create dynamically the httpParams by appending the property one by one with the following technique:

export interface NameFilter {
  sort:string,
  start:number,
  end:number,
  like:string
}

const mockFilter:NameFilter = {
    end:12,
    start:0,
    sort:"name",
    like:"test"
}

let httpParams:HttpParams = new HttpParams();
type ObjectKey = keyof typeof filter;
Object.keys(filter).forEach(
    function (key) { 
        httpParams=httpParams.append(key, 
        String(filter[key as ObjectKey]));
    }
);
return this.http.get<Name[]>(this.baseUrl+"/search",{params:httpParams})

saddamhr · Accepted Answer · 2023-02-01 06:52:59Z

0

    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

answered Feb 1, 2023 at 6:52

saddamhr

313 bronze badges

Comments

Pankaj Sajekar · Accepted Answer · 2023-02-08 10:31:28Z

0

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)
})

answered Feb 8, 2023 at 10:31

Pankaj Sajekar

786 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related