Issue with Angular 9 Json pipe not showing decimal values

Question

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks 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 use the json pipe {{data | json}} in my application, it displays as follows:

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

Although the value is 24.0, it's displayed as 24 due to the nature of how numbers are formatted. Is there a way to retain the decimal point and display it in my application?

html css angular pipe less

Answer 1

Answer №1

Managing this situation might be challenging, but there are a couple of solutions you can consider. You could either modify the data before sending it or adjust how the data is presented:

Convert the json value to a string instead of a number:

"pendingApplicationCount": "24.0"

Change the display format. Since you are using angular, utilize the DecimalPipe pipe

<div>{{ data.pendingApplicationCount | number: '1.1-5' }}</div>

Answer 2

Managing this situation might be challenging, but there are a couple of solutions you can consider. You could either modify the data before sending it or adjust how the data is presented:

Convert the json value to a string instead of a number:

"pendingApplicationCount": "24.0"

Change the display format. Since you are using angular, utilize the DecimalPipe pipe

<div>{{ data.pendingApplicationCount | number: '1.1-5' }}</div>

Answer 3

Answer №2

Building on the response provided by @PoulKruijt, it is evident that the JsonPipe serves as a simple transform function encapsulated within a single line of code.

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

An alternative approach could involve creating a custom pipe with a replacer parameter in the JSON.stringify() method.

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);
  }

}

Illustrative Example 1

This permits specifying the desired decimal precision within the template.

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

resulting in the representation of numbers with one decimal place.

Output Displayed in Template

{ "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" } ] }

Illustrative Example 2

You have the flexibility to define more precise decimals for additional trailing zeroes.

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

demonstrating

{ "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" } ] }

Answer 4

Building on the response provided by @PoulKruijt, it is evident that the JsonPipe serves as a simple transform function encapsulated within a single line of code.

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

An alternative approach could involve creating a custom pipe with a replacer parameter in the JSON.stringify() method.

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);
  }

}

Illustrative Example 1

This permits specifying the desired decimal precision within the template.

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

resulting in the representation of numbers with one decimal place.

Output Displayed in Template

{ "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" } ] }

Illustrative Example 2

You have the flexibility to define more precise decimals for additional trailing zeroes.

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

demonstrating

{ "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" } ] }

Issue with Angular 9 Json pipe not showing decimal values

Answer №1

Answer №2

Similar questions

Using jQuery to loop through divs, identify unique ones, and then add text from a specified value to a span element

Enhancing Image Quality upon Hovering

Something went wrong: Unable to access the properties of an undefined variable named 'gametitle'

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Tips for utilizing canReuse and routerOnReuse in Angular 2

How can I apply styles to table cells based on their data type using HTML and CSS?

Angular 14 presents an issue where the injectable 'PlatformLocation' requires compilation with the JIT compiler; however, the '@angular/compiler' module is currently missing

Can you explain the connection between CSS and WebKit?

Maximizing the width of an absolute div element inside a container

How to retrieve the HTTPClient value in Angular?

Immediate family members nearby are not an option. We will have to create the form dynamically

It appears that IE 10 is having trouble displaying modals, possibly due to a compatibility issue with jQuery 1.7.1's animate function

Padding-left may cause text to not wrap correctly

When the jQuery Div is moved to the right, it gradually shrinks in size, yet remains unchanged when

Integrate the dForm plugin with a convenient time picker widget

Is it feasible to dynamically incorporate various versions of Bootstrap within the head tag?

How can you reposition a component within the dom using Angular?

The functionality of `config.assets.debug = true` fails to

Implementing MySQL in JavaScript code leads to various possibilities

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100