Angular 9- Json pipe does not display the decimal value

user_13135178 0
Viewed 381

I have a json value something like this

this.data = {"eoiStatistics": [
{
  "dateRange": {
    "explicitStartDate": "1997-01-01T00:00:00",
    "explicitEndDate": "2019-07-01T00:00:00"
  },
  "outstandingApplicationCount": 0.0,
  "pendingApplicationCount": 24.0,
  "approvedApplicationCount": 0.0,
  "declinedApplicationCount": 0.0,
  "closedApplicationCount": 0.0 }]}

When i display this with a json pipe {{data | json}} in the application it displays like this

{"eoiStatistics": [
{
  "dateRange": {
    "explicitStartDate": "1997-01-01T00:00:00",
    "explicitEndDate": "2019-07-01T00:00:00"
  },
  "outstandingApplicationCount": 0,
  "pendingApplicationCount": 24,
  "approvedApplicationCount": 0,
  "declinedApplicationCount": 0,
  "closedApplicationCount": 0
}]}

So if my value is 24.0 it displays 24 , i know that the .0 has no value but I need to display it in my application. Is there a way to do it?

angular less pipe css html
2 Answers

There is no way to control this. You can however think of two workarounds. You can either manipulate the data being send, or change the way the data is displayed:

  1. Change the json value to a string, instead of a number: 
"pendingApplicationCount": "24.0"
  1. Change the way it's displayed. Because you use angular, you can use the DecimalPipe pipe
<div>{{ data.pendingApplicationCount | number: '1.1-5' }}</div>
user_31069200

In addition to the answer from @PoulKruijt, we could see the JsonPipe is a transform function with a single line.

transform(value: any): string {
  return JSON.stringify(value, null, 2);
}

So we could write a custom pipe with a replacer argument in the JSON.stringify() function.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'jsonDecimal'
})
export class JsonDecimalPipe implements PipeTransform {

  transform(value: any, length?: number): any {
    return JSON.stringify(
      value, 
      (key: any, value: any) => {
        if (typeof value === 'number') {
          return Number(value).toFixed(length);
        } else {
          return value;
        }
      }, 
      2);
  }

}

Example 1

You could then specify the number of decimal places you need to display in the template.

<div>{{ data | jsonDecimal:1 }}</div>

will print numbers with a single decimal place

Template output

{ "eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": "0.0", "pendingApplicationCount": "24.0", "approvedApplicationCount": "0.0", "declinedApplicationCount": "0.0", "closedApplicationCount": "0.0" } ] }

Example 2

You could also specify more decimal numbers if you need to append more zeroes at the end.

<div>{{ data | jsonDecimal:4 }}</div>

will print

{ "eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": "0.0000", "pendingApplicationCount": "24.0000", "approvedApplicationCount": "0.0000", "declinedApplicationCount": "0.0000", "closedApplicationCount": "0.0000" } ] }
user_65139210
Related