Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 734
Rzj Hayabusa Avatar asked Mar 12 '19 05:03

Rzj Hayabusa


People also ask

How to check value in array in jQuery?

1) Using jQuery If you are someone strongly committed to using the jQuery library, you can use the . inArray( ) method. If the function finds the value, it returns the index position of the value and -1 if it doesn't.

How to use each function for array in jQuery?

each(), which is used to iterate, exclusively, over a jQuery object. The $. each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time.

How can I check if a number is NaN in jQuery?

1. isNaN() Method: To determine whether a number is NaN, we can use the isNaN() function. It is a boolean function that returns true if a number is NaN otherwise returns false.

What is each() in jQuery?

jQuery Misc each() Method The each() method specifies a function to run for each matched element. Tip: return false can be used to stop the loop early.


2 Answers

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
like image 173
benvc Avatar answered Nov 14 '22 21:11

benvc


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);
});

like image 38
Deepak Avatar answered Nov 14 '22 22:11

Deepak