JavaScript is displaying Not a Number (NaN) instead of the expected value

Question

JavaScript is displaying Not a Number (NaN) instead of the expected value

Currently, I am facing an issue with retrieving the user's work duration from a database column stored in minutes. My goal is to convert this value to HH:mm format to calculate the total hours worked per week, but I'm encountering obstacles.

<td><strong>{{ Math.floor(teamUniqueHoursTotalPerUser[entry] / 1000 / 60 / 60) + 'h ' + Math.round(teamUniqueHoursTotalPerUser[entry] / 1000 / 60 % 60) + 'm' }}</strong></td>

I struggle with math, so my aim is to tackle this task using only Math libraries to enhance my skills. Currently, when there is no value present, I receive a NaN error. Instead, I would like it to display as Total: 0h 0m when no value exists.

Within the controller:

$scope.teamTimeInfoForCurrentWeek = {};

if (data != null) {

    var uniqueNamesArray = [];
    var uniqueHoursWorkedCurrentWeekPerUser = {};

    for (i = 0; i < data.length; i++) {
        var newUser = 0;
        data[i].Full_Name = data[i].Employee_Last_Name + ', ' + data[i].Employee_First_Name;

        if (uniqueNamesArray.indexOf(data[i].Full_Name) == -1) {
            uniqueNamesArray.push(data[i].Full_Name);
            newUser = 1;
        }

        if (data[i].Hours_Worked !== null && data[i].Hours_Worked >= 0) {

            data[i].Hours_Worked = moment.duration(data[i].Hours_Worked, 'minutes');
            if (newUser == 1) {
                uniqueHoursWorkedCurrentWeekPerUser[data[i].Full_Name] = moment.duration(data[i].Hours_Worked, 'minutes');
            }
            else {
                uniqueHoursWorkedCurrentWeekPerUser[data[i].Full_Name] += moment.duration(data[i].Hours_Worked, 'minutes');
            }
        }

        if (data[i].Lunch_Duration !== null && data[i].Lunch_Duration >= 0) {
            data[i].Lunch_Duration = moment.duration(data[i].Lunch_Duration, 'minutes');
        }
    }
    $scope.teamTimeInfoForCurrentWeek = data;
    $scope.teamHoursWorkedForCurrentWeek = uniqueHoursWorkedCurrentWeekPerUser;
    $scope.teamNameInfoForCurrentWeek = uniqueNamesArray;

Despite attempting to incorporate moment.js, I encountered difficulties with values exceeding 24 hours when trying to create a moment duration (minuteValue, 'minutes').

Any assistance provided would be greatly appreciated. JavaScript remains a challenging area for me.

javascript angularjs

Answer 1

Answer №1

If a value is missing, it will be identified as undefined. When using math operations on something that is undefined, the result will be NaN (Not-a-Number). To ensure that any variable that could potentially be undefined instead defaults to 0 when performing math operations, you can utilize the || operator in-line.

For example:

Math.floor((teamUniqueHoursTotalPerUser[entry] || 0) / 1000 / 60 / 60)

Answer 2

If a value is missing, it will be identified as undefined. When using math operations on something that is undefined, the result will be NaN (Not-a-Number). To ensure that any variable that could potentially be undefined instead defaults to 0 when performing math operations, you can utilize the || operator in-line.

For example:

Math.floor((teamUniqueHoursTotalPerUser[entry] || 0) / 1000 / 60 / 60)

Answer 3

Answer №2

When attempting to perform mathematical operations on a non-numeric value, you will receive the result of NaN. It appears that the variable

teamUniqueHoursTotalPerUser[entry]

is not defined in your code, leading to it being interpreted as undefined. Dividing undefined by any value will always yield NaN.

Answer 4

When attempting to perform mathematical operations on a non-numeric value, you will receive the result of NaN. It appears that the variable

teamUniqueHoursTotalPerUser[entry]

is not defined in your code, leading to it being interpreted as undefined. Dividing undefined by any value will always yield NaN.

Answer 5

Answer №3

When looping through data, it's important to handle default values for variables. In this case, if an employee's first name is missing, the comma is removed from the output.

Similarly, if Hours_Worked is missing, it defaults to 0.

for (i = 0; i < data.length; i++) {
    var newUser = 0;
    data[i].Full_Name = (data[i].Employee_Last_Name || '') + (data[i].Employee_First_Name ?  ', ' + data[i].Employee_First_Name : '');
    data[i].Hours_Worked = data[i].Hours_Worked || 0;

    ...
    ...
}

Answer 6

When looping through data, it's important to handle default values for variables. In this case, if an employee's first name is missing, the comma is removed from the output.

Similarly, if Hours_Worked is missing, it defaults to 0.

for (i = 0; i < data.length; i++) {
    var newUser = 0;
    data[i].Full_Name = (data[i].Employee_Last_Name || '') + (data[i].Employee_First_Name ?  ', ' + data[i].Employee_First_Name : '');
    data[i].Hours_Worked = data[i].Hours_Worked || 0;

    ...
    ...
}

Answer 7

Answer №4

When converting a value to a number, it is possible for it to result in NaN. There are various scenarios where this can occur as outlined in the documentation found at https://www.example.com/jsref/jsref_isnan.asp

isNaN(123) //false

isNaN(-1.23) //false

isNaN(5-2) //false

isNaN(0) //false

isNaN('123') //false

isNaN('Hello') //true

isNaN('2005/12/12') //true

isNaN('') //false

isNaN(true) //false

isNaN(undefined) //true

isNaN('NaN') //true

isNaN(NaN) //true

isNaN(0 / 0) //true

It is important to address any potential cases of NaN before attempting to convert the value to a number for

teamUniqueHoursTotalPerUser[entry]

.

Answer 8

When converting a value to a number, it is possible for it to result in NaN. There are various scenarios where this can occur as outlined in the documentation found at https://www.example.com/jsref/jsref_isnan.asp

isNaN(123) //false

isNaN(-1.23) //false

isNaN(5-2) //false

isNaN(0) //false

isNaN('123') //false

isNaN('Hello') //true

isNaN('2005/12/12') //true

isNaN('') //false

isNaN(true) //false

isNaN(undefined) //true

isNaN('NaN') //true

isNaN(NaN) //true

isNaN(0 / 0) //true

It is important to address any potential cases of NaN before attempting to convert the value to a number for

teamUniqueHoursTotalPerUser[entry]

.

JavaScript is displaying Not a Number (NaN) instead of the expected value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Controller unable to update AngularJS view

Make sure to wait for the current operation to finish before moving onto the next one

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

definition of a function with another function

An effective way to confirm a notify.js alert using selenium

Exploring the power of Javascript for number lookup

The silent button malfunctioning - Ionic

What is the proper way to request permission for allowing others to access the mailto function?

Karaf (Predix 14.3) error encountered: 413 FULL head - 413 (Request Entity Too Large) - Please check the request size

Unable to utilize the "let" keyword in WebStorm

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

a guide on integrating dynamic text input in AngularJS with SVG circles created in D3.js for effective filtering

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Trigger an alert message upon loading the HTML page with search text

Successfully updating a document with Mongoose findByIdAndUpdate results in an error being returned

From where does the require.js file originate?

Discovering an item within an array of objects using the find method in Ajax

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

Invoke a jQuery method in a dynamic manner

The jQuery toggle function seems to be skipping alternate items