What could be causing the getTotals() method to malfunction?

I have been working on a finance app that is designed to update the "income", "expenses", and "balance" tables at the top each time a new item is added by the user. However, the current code seems to be failing in updating these values correctly based on user input. Can anyone provide guidance on how to troubleshoot this issue?

normalizeNumbers(value) {
        const newValue = value.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL"
        });
        return newValue;
    }
    getTotals() {
        const newReceitas = this.valores.filter(({ checked }) => {
            checked === '<i class="fa-sharp fa-solid fa-arrow-up arrowUp-icon"></i>';
        }).map(({ valor }) => +valor);
        console.log(newReceitas);
        const newDespesas = this.valores.filter(({ checked }) => {
            checked == '<i class="fa-sharp fa-solid fa-arrow-down arrowDown-icon"></i>';
        }).map(({ valor }) => +valor);
        console.log(newDespesas);
        const totalReceitas = newReceitas.reduce((acc, curr) => {
            return acc + curr;
        }, 0);
        const totalDespesas = newDespesas.reduce((acc, curr) => {
            return acc + curr;
        }, 0);
        const totalSaldo = +totalReceitas - +totalDespesas;
        this.receitas.innerText = this.normalizeNumbers(+totalReceitas);
        this.despesas.innerText = this.normalizeNumbers(+totalDespesas);
        this.saldo.innerText = this.normalizeNumbers(totalSaldo);
    }
}

view image description here

Answer №1

After analyzing the code snippet above, my assumption is that the issue arises due to the filter callbacks not returning any values and producing empty arrays from the valores array.

To rectify this, you can either include a return statement:

({ checked }) => {
  return checked === '....'
}

or opt for an arrow function like so:

({ checked }) => checked === '....'

For further exploration and testing, consider using theTS Playground tool.

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

JavaScript tool for connecting tags with JSON properties

As a beginner in JS, I am curious if there exists a JS library that can help bind html fields to a JS object. For example: <div class="js_source"> <input field="name" /> <input field="surname" /> <button type="button">S ...

Steps for creating a dynamic validation using a new form control

I have an item that needs to generate a form const textBox = { fontColor: 'blue', fontSize: '18', placeholder: 'email', name: 'input email', label: 'john', validation: { required: false } ...

What sets Protractor apart from Grunt?

According to the Protractor website (http://www.protractortest.org/#/infrastructure), Protractor utilizes Selenium for browser automation. However, when browsing through the Grunt website (http://gruntjs.com/), it's mentioned that Grunt is also used f ...

Declaration of Typescript index.d.ts for a heavily nested function within an npm module

Regrettably, it appears that @types/rickshaw is lacking content, prompting me to create my own declaration file. The current one I have looks like this: declare module 'rickshaw' { export class Graph { constructor(obj: any); ...

Ways to manage numerous AJAX actions within a single HTTP request?

Currently, I am utilizing jQuery to create a multipart web page containing a list of links that are updated through periodic AJAX HTTP requests. Each link on the page is triggered by a timer in JavaScript, causing it to make an HTTP request to its designat ...

Troubleshooting the malfunction of the Angular 2 Tour of Heroes project following the separation of the app

Recently, I encountered a challenge while following a tutorial on learning Angular 2. Everything was going smoothly until I reached the point where I had to divide appcomponent into heroescomponent & appcomponent. Is there anyone else who has faced th ...

Which types of characters am I allowed to include in an HTTP response body while using NodeJS and Express?

I am currently developing a node express app that responds to an AJAX post from the client browser. I am curious about what characters would be considered invalid to include in the HTTP response body. My response header specifies the use of charset=utf-8, ...

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Having difficulty resolving a typescript error related to batch.update in my code. const batch = db.batch(); const listingDoc = await db.collection("listings").doc(listingID).get(); const listingData = listingDoc.data( ...

Manually assigning a value to a model in Angular for data-binding

Currently utilizing angular.js 1.4 and I have a data-binding input setup as follows: <input ng-model="name"> Is there a way to manually change the value without physically entering text into the input field? Perhaps by accessing the angular object, ...

Transform a fabricjs canvas into a base64 encoded image

I am attempting to transmit a canvas as an image to my server in base64 format. While Fabricjs provides options such as canvas.toSVG() or canvas.toDataURL({format: 'image/png'}) to convert the canvas to an image, the output I see in my console ap ...

What is the best way to create a loop using JSON information?

Seeking assistance to create a loop using JSON data to display the title, link, and description of advertisements in HTML format. Provided is a JSON template with two ads, but my actual JSON contains 10-20 IDs. What am I overlooking in the code below? Sto ...

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

Retrieving the value of a specific property nested within a JSON object using basic JavaScript

Hey there! Thanks for taking the time to check out my question. I'm diving into JavaScript and I've hit a roadblock trying to solve this particular problem: I'm looking to extract the value of a property nested within a JSON object under a ...

Spin and flip user-submitted images with the power of HTML5 canvas!

I am currently working on a profile upload system where we are implementing image rotation using the HTML5 canvas object with JavaScript. Although the uploaded image is rotating, we are facing issues where parts of the image are being cut off randomly. So ...

Display a React component according to the user's input

Within the first (parent) div, there is an underlined message stating: "This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)". import A from './components/A&ap ...

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

Clicking in Javascript can hide the scroll and smoothly take you to the top of the page

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

Is it possible to do bulk deletion in Flask Restless using AngularJS or JavaScript?

I am trying to implement bulk delete functionality in my AngularJS application by making an HTTP request to a Flask Restless API with version 0.17.0. While I know how to delete records one by one using their IDs in the URL, I am unsure if it is possible to ...

Lightbox.options does not exist as a function within the lightbox plugin

I recently incorporated a lightbox plugin into my website, which can be found at the following link: For displaying items on the page, I am using markup similar to this example: <a href="images/image-2.jpg" data-lightbox="my-image">Image #2</a&g ...

How to upload numerous chosen files from an Android device using PHP script

When attempting to upload multiple files using the file selection option on an Android mobile device, I encountered an issue of not being able to select specific multiple files. I tried utilizing the multiple-form/data and multiple="multiple" attributes w ...