CODEWITHSUNDEEP
angularangular-httpclienthttp-parameters
makkasi
makkasi

Reputation: 7288

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

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

Upvotes: 10

Views: 18127

Answers (5)

Panciz
Panciz

Reputation: 2234

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

Upvotes: 0

Pankaj Sajekar
Pankaj Sajekar

Reputation: 78

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

Upvotes: 0

saddamhr
saddamhr

Reputation: 21

    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

Upvotes: 0

H S W
H S W

Reputation: 7119

It can be done by using fromObject property

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

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

Upvotes: 20

Danilo Santos
Danilo Santos

Reputation: 86

I solved it that way: 

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

Upvotes: 6

Related Questions