I am trying to encode query parameter values in Angular 7. But I get 400 Bad Request status code, when my query parameter values contain any special character

Failed Request URL: http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

However, I get 200 OK status code , when my query parameter values do not contain any special characters.

Successful Request URL: http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE

The expected request url has to be like http://localhost/cardvalues?parentcardvalues=VALUE1&parentcardvalues=VALUE2

Below is my code,

parentcardvalues=["STONE","STONE AGE"]

let myparams = new HttpParams();

    if(parentcardvalues.length != 0)
       parentcardvalues.forEach((value) => { 

myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );

});

 this.http.get(this.baseUrl + 'api/67/cardvalues', {params: myparams});

The Swagger specification is,

Curl

curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE" -H  "accept: application/json"

Request URL

http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

I am trying to encode query parameter values in Angular 7. But I get 400 Bad Request status code, when my query parameter values contain any special character

Failed Request URL: http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

However, I get 200 OK status code , when my query parameter values do not contain any special characters.

Successful Request URL: http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE

The expected request url has to be like http://localhost/cardvalues?parentcardvalues=VALUE1&parentcardvalues=VALUE2

Below is my code,

parentcardvalues=["STONE","STONE AGE"]

let myparams = new HttpParams();

    if(parentcardvalues.length != 0)
       parentcardvalues.forEach((value) => { 

myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );

});

 this.http.get(this.baseUrl + 'api/67/cardvalues', {params: myparams});

The Swagger specification is,

Curl

curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE" -H  "accept: application/json"

Request URL

http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

• javascript
• angular
• http
• angular7
• urlencode

• I doubt you have to have the ? if you use params... – Heretic Monkey Commented Apr 4, 2019 at 21:09
• @HereticMonkey thanks, I still get same error after removing the extra " ? ". I was wondering if I need to set some options with my request header – jrapose Commented Apr 4, 2019 at 21:12
• Sounds like a back end problem. using %20 for space is uri encoding standard – charlietfl Commented Apr 4, 2019 at 21:25

3 Answers 3

you can decode your params using:

decodeURIComponent(encodedURI_string)

more information here

I created a new Encoder class:

import { HttpParameterCodec } from '@angular/mon/http';

export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

and then use it in the requests where I need it.

const params = new HttpParams({ encoder: new CustomHttpParamEncoder() })
  .set('parentcardvalues', value);
return this.httpClient.get(url, { params });

Agree, and you can do a general change with urls problems with chars in urlserializer: https://angular.io/api/router/DefaultUrlSerializer https://angular.io/api/router/UrlSerializer

You can overwrite this in app.module.ts (provide:{..,..}) You can see this: Angular 2 - Implement UrlSerializer

regards