HttpParams issue Angular 4, bad params

Question

I don't understant why, and I don't find the answer anywhere.

I have this issue when i want use params in http request.

identificationClientMAil(phone: string, mail: string) : Observable <any>{
    let params = new HttpParams().append('phone', phone).append('mail', mail);

    return this.http.get('http://localhost:8000/Programme/extranet-api/public', { headers: this.headers, params: params })
    .map(res => res.json())
    .catch(err => {
       throw 'error in source. Details: ' + err;
     });
  }

And my url look like this after:

http://localhost:8000/Programme/extranet-api/public?updates=%7B%22param%22:%22phone%22,%22value%22:%22ddddddd%22,%22op%22:%22a%22%7D&updates=%7B%22param%22:%22mail%22,%22value%22:%22%22,%22op%22:%22a%22%7D&cloneFrom=%7B%22updates%22:null,%22cloneFrom%22:null,%22encoder%22:%7B%7D,%22map%22:null%7D&encoder=%7B%7D&map=null

Where is my problem ?

How do you want the url to look like?

AVJT82
– AVJT82

2017-11-06 06:31:52 +00:00
Commented Nov 6, 2017 at 6:31 — AVJT82
– AVJT82, Commented Nov 6, 2017 at 6:31

Dhyey · Accepted Answer · 2017-11-06 05:51:42Z

1

You need to use URLSearchParams:

let params = new URLSearchParams();
urlSearchParams.append('phone', phone);
urlSearchParams.append('mail', mail);
return this.http.get('http://localhost:8000/Programme/extranet-api/public?' + urlSearchParams.toString(), { headers: this.headers })
.map(res => res.json());
.catch(err => {
   throw 'error in source. Details: ' + err;
 });

answered Nov 6, 2017 at 5:51

Dhyey

4,3453 gold badges28 silver badges34 bronze badges

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

Comments

Matúš Zábojník · Accepted Answer · 2017-11-06 07:20:00Z

1

What kind of issue do you have? It can also be a server issue (incorrect path to resource or other). Anyway Dhyey had a good suggestion using URLSearchParams, though it is a better idea to let http.get handle the params conversion (as you had in your code) like:

return this.http.get('http://localhost:8000/Programme/extranet-api/public', 
      { headers: this.headers, search: myUrlSearchParams })...;

answered Nov 6, 2017 at 7:20

Matúš Zábojník

1,2421 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

HttpParams issue Angular 4, bad params

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related