The Angular program is receiving significant data from the backend, causing the numbers to be presented in a disorganized manner within an

My Angular 7 application includes a service that fetches data from a WebApi utilizing EntityFramework to retrieve information.

The issue arises when numeric fields with more than 18 digits are incorrectly displayed (e.g., the number 23434343434345353453,35 appears as 23434343434345353000) upon being received by the service. I've conducted tests confirming that EntityFramework is loading the data correctly. Interestingly, when data is inserted via my Angular application, it is done so accurately with the 18 or 20 digits required, thanks to the model being created with the big.js library.

Front-end: Angular Back-end: WebApi with ASP .NET MVC and EntityFramework

Component

import Big from 'big.js';

export class Parametro {
    NRO_CONVENIO: string;
    FEC_INICIO_NEGOCIACION: Date;
    FEC_FIN_NEGOCIACION: Date;
    VLR_CUPO_APROBADO: Big;
    VLR_CUPO_UTILIZADO: Big;
    VLR_CUPO_APROBADO_STORAGE: Big;
    VLR_CUPO_UTILIZADO_STORAGE: Big;
    ESTADO_DISPONIBLE: string;
    ISEDIT: boolean;
}

export class ParametrosNegociacionService {
  formData: Parametro;
  list: Observable<Parametro>;
  readonly rootURL = environment.baseUrl; 

  constructor(private http: HttpClient) { }

  postParametro(formData: Parametro) {
      return this.http.post(this.rootURL + '/ParametrosNegociacion', formData);
  }

  refreshList() {
      this.http.get<Observable<Parametro>>(this.rootURL + '/ParametrosNegociacion')
    .toPromise().then(res => {
        this.list = res as Observable<Parametro>;
        this.list.forEach(element => {
          //Here the large number arrives badly
          element.VLR_CUPO_APROBADO_STORAGE = element.VLR_CUPO_APROBADO; 
        });
    });
  }
...

}

View

<table id="dataTable" class="dataTable">
  <thead class="headerStyle">
     <tr>
       <th>Vlr Cupo Aprobado</th>
     </tr>
  </thead>
  <tbody>
    <tr class="rowStyle" *ngFor="let emp of service.list">
     <!--Here the large number showon badly -->
     <td>{{emp.VLR_CUPO_APROBADO }}</td>
    </tr>
  </tbody>
</table>

Upon receiving data in the http.get request, the numeric values appear distorted.

How can I ensure the accurate reception of large numbers when requesting all information via the http.get?

I welcome any suggestions or ideas to resolve this issue.

Answer №1

Consider converting the data type of VLR_CUPO_APROBAD to string, as it may not be needed for arithmetic operations but only for display purposes.

One challenge in Javascript is handling large numbers.

I faced a similar issue in PHP, and found a satisfactory solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

Angular Material Table with Pagination: Fetch data from server by triggering API call upon clicking on the "Next Page

When working with MatPaginator in conjunction with mat-table, what is the most effective approach for handling the next page click event? I have developed a custom DataSource with connect() and disconnect() functions. Is it necessary to explicitly manage ...

Retrieving selected values from an ngx dropdown list

I am having trouble implementing ngx dropdown list in this way: <ngx-dropdown-list [items]="categoryItems" id="categoriesofdata" [multiSelection]="true" [placeHolder]="'Select categories'"></ngx-dropdown-list> ...

Production environment experiencing issues with Custom Dashboard functionality for AdminJS

I have successfully integrated AdminJS into my Koa nodejs server and it works perfectly in my local environment. My objective is to override the Dashboard component, which I was able to do without any issues when not running in production mode. However, wh ...

One way to dynamically hide certain fields based on the value of another field is by utilizing AngularJS, Razor, and C# in

Need assistance with AngularJS and Razor. I am a beginner in these technologies and need some help with the following code snippet: <div ng-app=""> <p>Input page number to filter: <input type="text" ng-model="pageNumber"></p> ...

How can you effectively declare a computed getter in MobX that aggregates an observable list?

Within my project, I have a class hierarchy consisting of projects, task lists, and tasks. Each array is marked as @observable. Now, I am looking to create a "@computed get allTasks" function within the project class that aggregates all tasks from all task ...

Can you explain the distinction between WebRequest.DefaultWebProxy and WebRequest.GetSystemWebProxy()?

Can someone help clarify the main distinctions between DefaultWebProxy and GetSystemWebProxy()? I've checked MSDN for information, but I still feel like I could use a more in-depth explanation. If I have the following proxy configuration options avai ...

Using Typescript with Gulp 4 and browser-sync is a powerful combination for front-end development

Could use some assistance with setting up my ts-project. Appreciate any help in advance. Have looked around for a solution in the gulpfile.ts but haven't found one yet. //- package.json { "name": "cdd", "version": "1.0.0", "description": "" ...

What could be causing the issue with my ASP.NET Docker configuration?

Having trouble starting my .NET6 application in Docker. It works fine with Kestrel server but gives an error about a missing 'main' function when running in Docker. This is the DockerFile I'm using: FROM mcr.microsoft.com/dotnet/aspnet:6.0 ...

What steps should I take to troubleshoot the ParseError related to the restriction of using 'import' and 'export' exclusively with 'sourceType: module' for importing UpgradeAdapter?

I have been working on upgrading an angular.js app to angular 2, following the guidelines provided at https://angular.io/docs/ts/latest/guide/upgrade.html. The application is already coded in Typescript, and we are using browserify and tsify for compiling ...

How to search for property values within an array of objects using MongoDB with C#

Within my documents, there is an array property known as arrayProperty structured like this: { _id: mongoObjectIdThingy, arrayProperty: [ {string1: "aString", otherProperty:"somethingelse"}, {string1: "aString2", otherProperty:"somethingelse" ...

What is the best way to upload a file using a relative path in Playwright with TypeScript?

Trying to figure out how to upload a file in a TypeScript test using Playwright. const fileWithPath = './abc.jpg'; const [fileChooser] = await Promise.all([ page.waitForEvent('filechooser'), page.getByRole('button' ...

Using C# to convert one specific JSON field into an object using a custom constructor

Imagine having a JSON string with the following structure: { "x" : "5", "y" : "example", "z" : ["2001-04-15T08:15:30-05:00 TextA. TextB.", "1998-07-22T08:15:30-05:00 MoreText1. MoreText2."] } The goal is to parse it into the classes below: cl ...

Launch a new email window in Outlook from a server using C#

Currently, I am working on a feature where users can select multiple product links and have the option to email those links to someone. The functionality works perfectly fine on my local machine, but when deployed, it throws an exception as shown below: ...

I'm having trouble with the ts extension in Angular 2 when using http.get command

In my Angular Cli project, I have a file named lessons.ts in the root folder to store data. In the app folder, there is a file called lesson.service.ts used for retrieving data. The code snippet looks like this: import { Injectable } from '@angular/c ...

Receiving an error message "Cannot read property 'X' of undefined" when invoking a sibling method

I'm completely new to Angular and trying to understand how events work within this framework. Here is my Parent Template setup: <child1 (myEvent)="child2.testMethod()"></child1> <child2 #child2 *ngIf="show"></child2> When I ...

Removing empty options from a select dropdown in Angular 9

In the process of working with Angular 9, I am currently in the process of constructing a dropdown menu that contains various options. However, I have encountered an issue where there is a blank option displayed when the page initially loads. How can I eli ...

What steps should I follow to utilize a JavaScript dependency following an NPM installation?

After successfully installing Fuse.js using npm, I am having trouble using the dependency in my JavaScript code. The website instructions suggest adding the following code to make it work: var books = [{ 'ISBN': 'A', 'title&ap ...

Encountering problems during JSON response deserialization

Upon calling an API, I received the following response as part of a functional test for handling a bad query: HTTP/1.1 400 Bad Request Date: Fri, 24 Jan 2014 17:43:39 GMT Sforce-Limit-Info: api-usage=5/5000 Content-Type: application/json;charset=UTF-8 ...

Unable to render an array retrieved from a GET request in Angular 2

After fetching an array from mongodb, I am trying to display it on the template. However, even though the response with articles is received (as shown in the Chrome network tool), the articles are not being rendered on the page. Below is the code snippet ...