How to check array value for NaN using jQuery each function?

Question

I have these HTML code that fetch data from database. I set an array to HTML input.

Html code

<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>January</th>
            <th>February</th>
        </tr> 
    </thead>
    <tbody>
        <?php
        $sql = DB::getInstance()->FetchArray("select * from table");
        if(count($sql) > 0)
        {
            foreach($sql as $row)
            {
                $i = 0;
                if($i == 0)
                {?>
                    <tr>
                        <td><input type="text" class="cat1" id="cat1" name="cat1[]" value="<?php echo $row['CATEGORY']; ?>" placeholder="" readonly></td>
                        <td><input type="text" class="jan1" id="jan1" name="jan1[]" value="<?php echo (($row['MONTH']=='JANUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
                        <td><input type="text" class="feb1" id="feb1" name="feb1[]" value="<?php echo (($row['MONTH']=='FEBRUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
                    </tr> 
                <?php
                }
                else
                {?>
                    <tr>
                        <td></td>
                        <td><input type="text" class="jan1" id="jan1" name="jan1[]" value="<?php echo (($row['MONTH']=='JANUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
                        <td><input type="text" class="feb1" id="feb1" name="feb1[]" value="<?php echo (($row['MONTH']=='FEBRUARY')? $row['TOTAL']:''); ?>" placeholder="" readonly></td>
                    </tr>
                <?php
                }
                $i++;
        }
        ?>
        <tr>
            <td colspan="2" style="text-align:right;">Total</td>
            <td><input type="text" class="form-control inputnumberwith2decimals total_jan1" id="total_jan1" name="" value="" placeholder="" readonly></td>
            <td><input type="text" class="form-control inputnumberwith2decimals total_feb1" id="total_feb1" name="" value="" placeholder="" readonly></td> 
        </tr>
    </tbody> 
</table>

The value for jan1[] display in console.log as

NaN
1000
3000
NaN

When i try to sum the total for jan1[], the output show as NaN because some of the array value is NaN. How can I set NaN value to 0 and do the sum calculation ?

What I want to achieve is to sum up the value like below

CATEGORY        JANUARY     FEBRUARY
BANANA          NaN         NaN
                1000        NaN
                2000        NaN
                NaN         NaN

TOTAL           3000        0

Here's the code for jQuery.

<script>
    $(document).ready(function(){
        var sum_jan1 = parseFloat(0);
        $(".jan1").each(function(){
            var value = parseFloat($(this).val());
            sum_jan1 += value;
        });
        $('#total_jan1').val(sum_jan1);
    });
</script>

Thanks.

NaN is falsy so you can use var value = parseFloat($(this).val()) || 0; — Phil
– Phil, Commented Mar 12, 2019 at 5:31
Possible duplicate of How to turn NaN from parseInt into 0 for an empty string? — Phil
– Phil, Commented Mar 12, 2019 at 5:32

benvc · Accepted Answer · 2021-09-30 14:43:19Z

4

You just need to convert the NaN values to 0 in your sum function. Following is an example using reduce:

const arr = [NaN, 1000, 3000, NaN];
const sum = arr.reduce((acc, num) => acc += num || 0, 0);
console.log(sum);
// 4000

edited Sep 30, 2021 at 14:43

answered Mar 12, 2019 at 5:42

benvc

15.3k4 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak · Accepted Answer · 2019-03-12 05:47:02Z

3

Try this

<script>
$(document).ready(function(){
    var sum_jan1 = parseFloat(0);
    $(".jan1").each(function(){
        var value = parseFloat($(this).val());
        sum_jan1 += value?value:0;
    });
    $('#total_jan1').val(sum_jan1);
});

answered Mar 12, 2019 at 5:47

Deepak

1,4432 gold badges14 silver badges32 bronze badges

Comments

Mayur · Accepted Answer · 2019-03-12 05:47:39Z

2

just replace var value = parseFloat($(this).val()); to

var value = $(this).val() ? $(this).val() : 0; line.

This will solve your issue.

answered Mar 12, 2019 at 5:47

Mayur

5,1294 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to check array value for NaN using jQuery each function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related