how pass a string with decimal like 18.5 in the URL in Angular

Question

User selects a string with decimal in it like 17.5,12.5 etc from radio buttons and It will be passed to the Service.ts (in Angular) where API will be called and this value is passed in the URL as a resource.THis is my code in Service.ts.

  getRequestedData(  ID: number,  sizeApplicable: string ): Observable<POM[]> {
        debugger;
        let size; 
        if(sizeApplicable.indexOf('.')!=-1){
        size= sizeApplicable.replace( '.', '____' );} 
        console.log(size);
      return this._http.get( this.API_BaseUrl + '/<URL>/'  + ID + '/' + size )
            .map(( response: Response ) => <POM[]>response.json() )
            .catch( this.handleError );
    } 

As you can see, the decimal is not getting replaced with '____' rather is simply passed with the decimal and as usual it is not considered and it is treated as 18 by Back End application.

Can someone please help to correct this code or suggest a better code in Angular4 to pass this string with decimal in URL.:( [1]: https://i.stack.imgur.com/mh8HU.png

Answer 1

You can use encodeURIComponent(). See documentation

getRequestedData(ID: number, sizeApplicable: string): Observable<POM[]> {
    if (sizeApplicable.indexOf('.') !== -1) {
        do {
            sizeApplicable = sizeApplicable.replace(/\./g, encodeURIComponent('.'));
        } while (sizeApplicable.indexOf('.') !== -1)
    } 

    return this._http.get(`${this.API_BaseUrl}/<URL>/${ID}/${sizeApplicable}`)
        .map(( response: Response ) => <POM[]>response.json() )
        .catch( this.handleError );
}