JavaScript encountering a NaN value

I'm encountering an issue where I am receiving a NaN when attempting to summarize columns of a report. Additionally, my query is only retrieving 1 row of data, but the grid is displaying 2 rows.

Does anyone have any suggestions on how to resolve this problem? Thank you in advance!

$.each(data["resultado"], function(key, item) {
  totalPago += item.MontoPagado;
  item.MontoPagado = item.MontoPagado.formatMoney(2, '.', ',');
  self.TotalPagado(totalPago);

  // Thousand Bill
  totalMil += item.mil;
  self.tMil(totalMil);
  console.log(item);

  // Five Hundred Bill
  totalQuinientos += item.Quinientos;
  self.tQuinientos(totalQuinientos);

  // Two Hundred Bill
  totalDoscientos += item.doscientos;
  self.tDoscientos(totalDoscientos);

  // One Hundred Bill
  totalCien += item.cien;
  self.tCien(totalCien);

  // Fifty Bill
  totalCincuenta += item.cincuenta;
  self.tCincuenta(totalCincuenta);

  self.listaReporte.push(item);
});

self.TotalPagado(totalPago.formatMoney(2, '.', ','));
self.tMil(totalMil);
self.tQuinientos(totalQuinientos);
self.tDoscientos(totalDoscientos);
self.tCien(totalCien);
self.tCincuenta(totalCincuenta);

https://i.sstatic.net/Uph8b.png

javascriptreportnan

Answer №1

All the denominations are stored inside the Denominacion object, so make sure to access them using item.Denominacion.mil, item.Denominacion.Quinientos, and so on.

Number.prototype.formatMoney = function(c, d, t) {
  var n = this,
    c = isNaN(c = Math.abs(c)) ? 2 : c,
    d = d == undefined ? "." : d,
    t = t == undefined ? "," : t,
    s = n < 0 ? "-" : "",
    i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
    j = (j = i.length) > 3 ? j % 3 : 0;
  return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

var data = {
  "estatus": true,
  "mensaje": "",
  "resultado": [{
    "Fecha": "2018-05-05T00:00:00",
    "IDEmpleado": 456,
    "NombreCompleto": "Jose Luis",
    "MontoPagado": 2079.26,
    "Denominacion": {
      "dosmil": 0,
      "mil": 2,
      "Quinientos": 0,
      "doscientos": 0,
      "cien": 0,
      "cincuenta": 1,
      "veinticinco": 1,
      "diez": 0,
      "cinco": 0,
      "uno": 4,
      "dosmilTotal": 0,
      "milTotal": 0,
      "quinientosTotal": 0,
      "doscientosTotal": 0,
      "cienTotal": 0,
      "cincuentaTotal": 0,
      "veinticincoTotal": 0,
      "diezTotal": 0,
      "cincoTotal": 0,
      "unoTotal": 0
    }
  }]
};

var totalPago = 0;
var totalDosmil = 0;
var totalMil = 0;
var totalQuinientos = 0;
var totalDoscientos = 0;
var totalCien = 0;
var totalCincuenta = 0;

data["resultado"].forEach(function(item) {
  totalPago += item.MontoPagado;
  item.MontoPagado = item.MontoPagado.formatMoney(2, '.', ',');

  // Thousand Pesos Bill
  totalMil += item.Denominacion.mil;
  
  // Five Hundred Pesos Bill
  totalQuinientos += item.Denominacion.Quinientos;

  // Two Hundred Pesos Bill
  totalDoscientos += item.Denominacion.doscientos;

  // One Hundred Pesos Bill
  totalCien += item.Denominacion.cien;

  // Fifty Pesos Bill
  totalCincuenta += item.Denominacion.cincuenta;

});

console.log(totalPago.formatMoney(2, '.', ','));
console.log(totalMil);
console.log(totalQuinientos);
console.log(totalDoscientos);
console.log(totalCien);
console.log(totalCincuenta);

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

Leverage JSON data and implement it in JavaScript

In my PHP page, I have a JavaScript function that includes a JSON method for retrieving data from the database. The code snippet looks like this: $this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class ...

javascriptphpjsonyii2

The Vue Watch feature fails to trigger when incorporating axios

Hello everyone, I am facing an issue with my code that involves fetching data from a database using axios. The problem is that the watch function is not triggering in the .then() block. Below is the snippet of code I am currently working with. Thank you ...

javascriptvue.js

Tips for personalizing error messages for the "required" field by utilizing a dictionary feature on VeeValidate in Vue.Js

I am trying to update the error message that appears when an input field with the "cpf" rule is left empty (meaning it does not meet the "required" rule). I believe using the "dictionary method" with custom messages is the solution, but I am struggling to ...

javascriptvue.jsvuejs2vee-validate

What is the reason behind router.base not functioning properly for static sources while running 'npm run build' in Nuxt.js?

Customizing Nuxt Configuration const BASE_PATH = `/${process.env.CATEGORY.toLowerCase()}/`; export default { router : { base : BASE_PATH }, } In addition, there is a static source for an image in the component: <img src="/mockups/macbookpro_01. ...

javascriptvue.jsnpmwebpacknuxt.js

Unusual marking on the navigation bar

Currently, I am making updates to a website that was created by a previous employee long before I joined the team. One of the requested changes is to eliminate the orange box surrounding the navigation links. The navigation appears to be generated using Ja ...

javascripthtmlcssinternet-explorergoogle-chrome

Filtering in JavaScript can be efficiently done by checking for multiple values and only including them if they are not

In my current coding challenge, I am attempting to create a filter that considers multiple values and only acts on them if they are not empty. Take the following example: jobsTracked = [ { "company": "Company1", ...

javascriptarraysjsonfilterfiltering

Encountering a data retrieval issue when using the useSWR hook in a project using reactjs

I am trying to retrieve data from the backend using useSWR. However, I have encountered two bugs in the function getDataUseSWR. The errors occur at line 'fetch(url).then': 1: "Expected 0 arguments, but got 1."; 2: "Property 'then' does ...

javascriptreactjsnext.jsfetch-api

Adding the Setting component to the Style Manager

I'm struggling to add component settings (traits) into the Style Manager panel section because of insufficient documentation. The way it is demonstrated in the demo is not clear to me. Is there a specific block of code that I should be using? I' ...

javascripthtmlcssangularjsgrapesjs

Event listeners can only be removed within the useEffect hook

I have encountered an issue when trying to remove an event listener added inside the useEffect hook. The listener is set up to run once after the first rerender, thanks to the empty array passed as the second argument in the useEffect call. I attempted t ...

javascriptreactjsreact-hooks

D3 group of legendary elements

Is there a way to group both the circle and text elements for each legend item together? I'm currently facing a challenge with the enter/exit methods. While I can create the groups (g), I'm unable to append the text and circle elements. li.sel ...

javascripthtmld3.js

Troubleshooting the issue: Node.js application unable to utilize Mongodb's $addToSet functionality

I'm having an issue with mongo's $addToSet function not properly adding a Store to my stores array (where I have commented out seemed to work), resulting in duplicate IDs. Can anyone help me identify my mistake and suggest a solution? Thank you. ...

javascriptnode.jsmongodb

Encountering CORS problems when sending a request containing JSON data in the body

I have a local react application running on port 3000 and an express server running on port 8000. I am trying to make a request from within my react app as follows: fetch('http://localhost:8000/login', { method: 'POST', headers ...

javascriptreactjsexpresscorsfetch-api

Check if an object is already in an array before pushing it in: JavaScript

Summary: I am facing an issue with adding products to the cart on a webpage. There are 10 different "add to cart" buttons for 10 different products. When a user clicks on the button, the product should be added to the this.itemsInCart array if it is not a ...

javascript

Processing ajax requests in Rails 4 using HTML format

I'm currently in the process of setting up ajax functionality for my contact form and I am currently testing to ensure that the ajax call is being made. When checking my console, I noticed that it is still being processed as HTML and I cannot seem to ...

javascriptjqueryruby-on-railsajax

Serve different files using Node.js socket.io webserver, not just index.html

I recently started delving into socket.io and decided to use this chat example as a reference. As I navigate to ip:8080/public/index.html, I realize the need to access other files, such as additional JS scripts that will be used on the client side in the ...

javascriptnode.jssocketssocket.io

Tips for receiving accurate HTML content in an Ajax request

I have used an Ajax call to fetch data from a function that returns an entire HTML table. $.ajax({ url: "/admin/project/getProjectTrackedTimes", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('cont ...

javascriptjqueryhtmlajaxformat

Display a collection of objects using Jade / Pug syntax

Struggling to find resources on Pug / Jade templating, turning to this platform for help. I've been diving into documentation on iterations along with consulting this helpful link. Working with Node.js, Express, and pug for a school project - a mock ...

javascriptnode.jsexpresspug

Tips for transmitting HTML as a JSON object through the res.render function in expressjs

My issue involves a JavaScript function that returns an HTML element. I want to pass this element along for users to view as actual HTML, but it ends up appearing as a string with special characters like "<" and ">". For example, "<" appears as (& ...

javascripthtmlnode.jsexpresspug

Vows.js: Utilizing data from parent topics in nested topics

Is there a way to access the return value of an outer topic from within a test in an inner topic? To clarify, consider this example: "build.css" : { topic : function(file) { fs.readFile(fixtures + "/public/build.css", "utf8", this.callback); }, ...

javascriptnode.jsbddvows

Issues with jQuery slide operation

I'm facing an issue with jQuery and I can't figure out where it's coming from. Here is the error message that keeps showing up in the console: Uncaught TypeError: Object [object Object] has no method 'getElement' script_16.js:46Un ...

javascriptjqueryjoomlajquery-slide-effects