Angular 4 3 - HttpClient set params

Question

let httpParams   new HttpParams   set  aaa    111    httpParams set  bbb    222      Why this doesn t work  It only set the  aaa  and NOT the  bbb   Also  I have an object   aaa  111  bbb  222   How can I set all the values without looping   UPDATE  this seems to work  but how can avoid the loop    let httpParams   new HttpParams    Object keys data  forEach function  key         httpParams   httpParams append key  data key

User · Answer

HttpParams is intended to be immutable  The set and append methods don t modify the existing instance  Instead they return new instances  with the changes applied   let params   new HttpParams   set  aaa    A          now it has aaa params   params set  bbb    B                        now it has both   This approach works well with method chaining   const params   new HttpParams      set  one    1      set  two    2         though that might be awkward if you need to wrap any of them in conditions   Your loop works because you re grabbing a reference to the returned new instance  The code you posted that doesn t work  doesn t  It just calls set   but doesn t grab the result   let httpParams   new HttpParams   set  aaa    111       now it has aaa httpParams set  bbb    222                              result has both but is discarded

User · Answer

Using this you can avoid the loop       obj is the params object with key-value pair      This is how you convert that to HttpParams and pass this to GET API    const params   Object getOwnPropertyNames obj                  reduce  p  key    gt  p set key  obj key    new HttpParams       Furthermore  I suggest making toHttpParams function in your commonly used service  So you can call the function to convert the object to the HttpParams          Convert Object to HttpParams     param  Object  obj     returns  HttpParams      toHttpParams obj  Object   HttpParams       return Object getOwnPropertyNames obj           reduce  p  key    gt  p set key  obj key    new HttpParams         Update       Since 5 0 0-beta 6  2017-09-03  they added new feature   accept   object map for HttpClient headers  amp  params       Going forward the object can be passed directly instead of HttpParams    This is the other reason if you have used one common function like toHttpParams mentioned above  you can easily remove it or do changes if required

User · Answer

Since HTTP Params class is immutable therefore you need to chain the set method   const params   new HttpParams    set  aaa    111    set  bbb    222

User · Answer

Another option to do it is   this httpClient get  path         params  Object entries data  reduce       params   key  value     gt  params set key  value   new HttpParams

User · Answer

My helper class  ts  to convert any complex dto object  not only  string dictionary   to HttpParams   import   HttpParams   from   angular common http    export class HttpHelper     static toHttpParams obj  any   HttpParams       return this addToHttpParams new HttpParams    obj  null          private static addToHttpParams params  HttpParams  obj  any  prefix  string   HttpParams           for  const p in obj          if  obj hasOwnProperty p             var k   p          if  prefix              if  p match   - 0 1  d                    k   prefix         p                    else               k   prefix         p                                        var v   obj p           if  v     null  amp  amp  typeof v      object   amp  amp    v instanceof Date               params   this addToHttpParams params  v  k             else if  v     undefined              if  v instanceof Date                params   params set k   v as Date  toISOString       serialize date as you want                       else               params   params set k  v                                            return params         console info    HttpHelper toHttpParams       id  10      date  new Date        states   1  3       child          code   111             toString         id 10 amp date 2019-08-02T13 19 09 014Z amp states 5B0 5D 1 amp states 5B1 5D 3 amp child code 111

User · Answer

Since  MaciejTreder confirmed that we have to loop  here s a wrapper that will optionally let you add to a set of default params   function genParams params  object  httpParams   new HttpParams     object       Object keys params           filter key   gt                let v   params key               return  Array isArray v     typeof v      string                       v length  gt  0                      v     null  amp  amp  v     undefined                       forEach key   gt                httpParams   httpParams set key  params key                    return   params  httpParams        You can use it like so   const OPTIONS         headers  new HttpHeaders            Content-Type    application json              params  new HttpParams   set  verbose    true      let opts   Object assign     OPTIONS  genParams   id  1    OPTIONS params    this http get BASE URL  opts      -- gt      verbose true amp id 1

User · Answer

As far as I can see from the implementation at https   github com angular angular blob master packages common http src params ts  You must provide values separately - You are not able to avoid your loop   There is also a constructor which takes a string as a parameter  but it is in form param value amp param2 value2 so there is no deal for You  in both cases you will finish with looping your object    You can always report an issue feature request to angular  what I strongly advise  https   github com angular angular issues  PS  Remember about difference between set and append methods

User · Answer

Before 5 0 0-beta 6 let httpParams   new HttpParams    Object keys data  forEach function  key         httpParams   httpParams append key  data key         Since 5 0 0-beta 6  Since 5 0 0-beta 6  2017-09-03  they added new feature  accept object map for HttpClient headers  amp  params  Going forward the object can be passed directly instead of HttpParams   getCountries data  any           We don t need any more these lines        let httpParams   new HttpParams           Object keys data  forEach function  key               httpParams   httpParams append key  data key                    return this httpClient get  quot  api countries quot    params  data

User · Answer

In more recent versions of  angular common http  5 0 and up  by the looks of it   you can use the fromObject key of HttpParamsOptions to pass the object straight in   let httpParams   new HttpParams   fromObject    aaa  111  bbb  222         This just runs a forEach loop under the hood  though    this map   new Map lt string  string   gt     Object keys options fromObject  forEach key   gt      const value    options fromObject as any  key     this map   set key  Array isArray value    value    value

User · Answer

Just wanted to add that if you want to add several parameters with the same key name for example  www test com home id 1 amp id 2  let params   new HttpParams    params   params append key  value     Use append  if you use set  it will overwrite the previous value with the same key name

User · Answer

As for me  chaining set methods is the cleanest way  const params   new HttpParams    set  aaa    111    set  bbb    222

User · Answer

This solutions working for me    let params   new HttpParams            Object keys data  forEach p   gt                params   params append p toString    data p  toString

User · Answer

Couple of Easy Alternatives  Without using HttpParams Objects  let body        params          email    emailId       password    password         this http post url  body     Using HttpParams Objects  let body   new HttpParams     fromObject          email    emailId       password    password         this http post url  body

[angular] Angular 4.3 - HttpClient set params

Examples related to angular

Examples related to angular-http