Angular Error: The first argument has a property that contains NaN

Struggling with a calculation formula to find the percentage using Angular and Typescript with Angularfire for database storage. Encountered an error stating

First argument contains NaN in property 'percent.percentKey.percentMale
. The properties are defined in a class as shown below.

//app.ts
export class App {
  $key: string;
  gender: string;
  male: number = 0;
  female: number = 0;
  percentMale: number = 0;
  percentFemale: number = 0;
}


//app.service.ts
insertdata(data: App) {
  this.dataList.push({
    gender: data.gender,
  });

  if (data.gender == 'Male') {
    //this.male ++;
    data.male = data.male++
  } else if (data.gender == 'Female') {
    //this.female ++;
    data.female = data.female++
  }

  data.percentMale = data.male / (data.male + data.female) * 100
  console.log('male', data.male + '%');

  data.percentFemale = data.female / (data.male + data.female) * 100
  console.log('female', data.female + '%');
  
  console.log('1', data.percentMale); //it returns NaN
  console.log('2', data.percentFemale); //it returns NaN

  this.percentList.update("percentKey", {
    percentMale: data.percentMale,
    percentFemale: data.percentFemale
  })
}

The class is successfully imported into the service, and the insertdata function is being called from component.ts like

this.AppService.insertpertanyaan(this.AppService.selectedpertanyaan);
. Seeking assistance to resolve this issue. Please let me know if additional code snippets are required. Thank you.

Answer №1

These sections are causing issues:

data.male = data.male++;
data.female = data.female++;

This should be corrected to:

data.male++;
data.female++;

When using the postfix increment operator, x++, the value of x is increased but the expression returns the previous value of x. Therefore, when you assign like this

x = x++;

x is first incremented, then its prior value is assigned back to x. Consequently, x remains at its original value.

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

Steps for calculating the average of several columns within a table using Angular 10

Currently, I have a function that successfully calculates the sum of JSON data in all columns on my tables. However, my attempt to get the average of each column is resulting in NaN or infinity. What could be the issue here? Here is my current implementat ...

What is the process for marking a form field as invalid?

Is it possible to validate the length of a field after removing its mask using text-mask from here? The problem is that the property "minLength" doesn't work with the mask. How can I mark this form field as invalid if it fails my custom validation met ...

Is it possible for me to modify the appearance of the ion-searchbar in Angular?

Currently working on an angular ionic project and I'm looking to personalize the design of the ion-searchbar. In the default template, the search bar icon is positioned on the left side. My goal is to adjust the placement of the icon and have it situa ...

Error management and callback handling in MSAL.js for Angular 6 Single Page Applications

I am currently using msal.js in an angular 6 SPA for authentication purposes, but I have encountered a few issues: Initially, I struggled to find clear examples on how to handle errors with the library, so I pieced together information from various source ...

Guide to setting up Cosmos DB database connection using NestJS version 9.0.0

I'm encountering issues when attempting to include the Cosmos DB connection module in nestjs v9, as I'm facing dependency errors. Nest is unable to resolve the dependencies of the AzureCosmosDbCoreModule (COSMOS_DB_CONNECTION_NAME, ?). Please ens ...

unable to display toolbar in ckeditor5 decoupled document with Angular

Having trouble implementing CKeditor5 decoupled document in Angular-10 and unable to display the toolbar. Component.ts import * as CKeditor from '@ckeditor/ckeditor5-build-decoupled-document'; export class MyComponent { editor = CKeditor } ...

'Error: The type is missing the 'previous' property - Combining TypeScript with ReactJS'

I am quite new to using reactjs and ts. While I understand the error that is occurring, I am unsure of the best solution to fix it. Currently working with reactjs, I have created an: interface interface IPropertyTax { annul: { current: number; p ...

What methods can I use to prevent the addition of new values and duplicates within angular mat-chips?

I am utilizing angular 9 mat-chips and I am seeking a way to prevent adding new values in the input field, allowing only items from the autocomplete list to be added. For instance, if 'abc' is typed, which is not in the autocomplete list, pressin ...

Typescript is unable to locate the .d.ts files

Working on a personal project and came across a library called merge-graphql-schemas. Since the module lacks its own typings, I created a file at src/types/merge-graphql-schemas.d.ts In merge-graphql-schemas.d.ts, I added: declare module "merge-graphql-s ...

Error: Component with nested FormGroup does not have a valid value accessor for form control in Angular

In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...

Is it possible to determine the type of a variable by simply clicking on it in IntelliJ (specifically in typescript)?

Having the ability to hover over a variable and see the expected type in TypeScript would be incredibly beneficial. I'm curious if there is some sort of internal static analysis being conducted that stores this information. Is there a method for acces ...

Create a unique type in Typescript that represents a file name with its corresponding extension

Is there a way for me to specify the type of a filename field in my object? The file name will consist of a string representing the name of the uploaded file along with its extension. For instance: { icon: "my_icon.svg" } I am looking for a ...

Here is an example showcasing how to use Angular 2 to make an

How can I correctly retrieve json data from an http get request in Angular 2? Currently, I am working on testing some local data with a mocked endpoint. Although I am able to see the result in the http.get() method, I am facing issues when trying to assign ...

Encountering an Issue: "ng new" Command Throws Error Upon Creating Angular Project

I am encountering an issue while using ng new project_name: The error message states "An invalid configuration file was found ['angular.json']. Please delete the file before running the command." I am stuck on this problem and unsure of how to ...

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

Is there a method to iterate through dynamically added nested arrays, similar to the Russian Matryoshka dolls?

I am facing a challenge in my Angular TypeScript class where I need to define a function that can loop through dynamically added nested arrays. The issue arises because my template displays a custom Kendo grid which requires me to traverse a type of "Matri ...

Although everything appears to be running smoothly in Express, my request is returning null

I am facing an issue with a router in my code. In the main index.ts file, I have the following line: app.use("/api/tshirts", tshirts) And in tshirts.ts file, I have defined the following routes: router.get("/", tshirtsController.getTShirts) router.get("/ ...

Tips for conditionally displaying a Next.js component depending on the authentication status of the user making the request from Firebase

Note: Currently, I am implementing Next.js 13 within the app/ directory. I have been delving into Firebase and Next.js and am encountering difficulties grasping a particular concept. Imagine I have a Home() component structured as follows /app/page.jsx e ...

The type '0 | Element | undefined' cannot be assigned to the type 'Element'

I encountered the following error: An error occurred when trying to render: Type '0 | Element | undefined' is not assignable to type 'Element'. Type 'undefined' is not assignable to type 'ReactElement<any, any>&apo ...

Issue with displaying ngRx/store Observable values in Angular template

Using examples from the ngRx documentation, I am implementing a redux model in our Angular application. The code functions correctly, with actions firing and updating the store as expected. However, I am facing an issue where the template remains empty, an ...