While binding data in HTML table getting NAN values

I have implemented the below logic for displaying calculation with data. So while displaying the data in Maintenance Point column I am getting values as NaN. But there should be no values. What is wrong in below column?

function displaySignOffSheetFTTX(ReportType, Month, DataList) {
    var _reportType = (ReportType == 'ALL') ? "PAN INDIA" : ReportType;
    var _month = Month;

    var table = $('#grdCicleDatatable');
    $(table).empty();
    var thead = "";
    var datalist = JSON.parse(DataList);

    
        thead = "<thead><tr><th rowspan='2' class='text-left'>Sr.No</th><th rowspan='2' class='text-left'>Maintenance Point</th><th align='center' colspan='5'>Billable Scope Approved by CMM</th></tr><tr><th class='text-left'>UG Scope (KM)</th><th class='text-left'>Aerial Scope (KM)</th><th class='text-left'>MDU Scope (KM)</th><th class='text-left'>Aerial + MDU Scope (KM)</th><th class='text-left'>Total Scope (KM)</th></tr></thead>";
    

    var tbody = "<tbody>";
    table.append(thead);
    table.append(tbody);

    if (datalist != null && datalist.length > 0) {
      
        var AerialMDUTotal = 0;
        var UGAerialMDUTotal = 0;

        $.each(datalist, function (key, val) {

            key++;

            val.UG_LENGTH = val.UG_LENGTH == null ? 0 : parseFloat(val.UG_LENGTH);
            val.UG_LENGTH = val.UG_LENGTH.toFixed(2);

            val.AR_LENGTH = val.AR_LENGTH == null ? 0 : parseFloat(val.AR_LENGTH);
            val.AR_LENGTH = val.AR_LENGTH.toFixed(2);

            val.MDU_LENGTH = val.MDU_LENGTH == null ? 0 : parseFloat(val.MDU_LENGTH);
            val.MDU_LENGTH = val.MDU_LENGTH.toFixed(2);

            AerialMDUTotal = parseFloat(val.AR_LENGTH) + parseFloat(val.MDU_LENGTH);

            UGAerialMDUTotal = parseFloat(val.UG_LENGTH) + AerialMDUTotal;
            UGAerialMDUTotal = UGAerialMDUTotal.toFixed(2);

            

            var tr = "<tr><td>" + key + " </td><td>" + val.ITEM + "</td><td>" + val.UG_LENGTH + "</td><td>" + val.AR_LENGTH + "</td><td>" + val.MDU_LENGTH + "</td><td>" + AerialMDUTotal + "</td><td>" + UGAerialMDUTotal + "</td></tr>";

            table.append(tr);
        });

        table.append('</tbody>');
    }
    var footer = "<tfoot><th colspan='1' style='text-align:center'><b>Total:</b></th><th class='text-center'></th><th class='text-center'></th><th class='text-center'></th><th class='text-center'></th><th class='text-center'></th><th class='text-center'></th></tfoot>";

    table.append(footer);

    oTable = $(table).dataTable({
        dom: 'tp',
        "dom": 'tp<"bottom"B><"clear">',
        "searching": false,
        responsive: true,
        "autoWidth": true,
        "bDestroy": true,
        "pageLength": 6,
        paging: false,
        "columnDefs": [
            { "width": "7.7%", "targets": 0 },
            { "width": "7.7%", "targets": 1 },
            { "width": "7.7%", "targets": 2 },
            { "width": "7.7%", "targets": 3 },
            { "width": "7.7%", "targets": 4 },
            { "width": "7.7%", "targets": 5 },
            { "width": "7.7%", "targets": 6 }

        ],
        buttons: [
            {
                "extend": "excelHtml5", "text": "Export to Excel", "filename": _reportType + "_SignOffSheet_" + _month,
                title: 'Sign Of Sheet of ' + _reportType + ' Circle for ' + _month + ' Month',
                exportOptions: {
                    columns: ':visible',
                    format: {
                        header: function (data, columnindex, trDOM, node) {
                            return GetColumnPrefixFTTX(columnindex) + data;
                        }
                    }
                }
            }
        ],
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(), data;

            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : (typeof i === 'number' ? i : 0);
            };

            var FTTXUGTotal = api.column(1).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);
            var FTTXARTotal = api.column(2).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);
            var FTTXMDUTotal = api.column(3).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);
            var TotFTTXUGTotal = api.column(4).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);
            var TotFTTXARTotal = api.column(5).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);
            var TotFTTXMDUTotal = api.column(6).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0).toFixed(2);

            $(api.column(0).footer()).html('Total');
            $(api.column(1).footer()).html(FTTXUGTotal);
            $(api.column(2).footer()).html(FTTXARTotal);
            $(api.column(3).footer()).html(FTTXMDUTotal);
            $(api.column(4).footer()).html(TotFTTXUGTotal);
            $(api.column(5).footer()).html(TotFTTXARTotal);
            $(api.column(6).footer()).html(TotFTTXMDUTotal);
        },

        initComplete: function () {
            var btns = $('.dt-button');
            btns.addClass('btn btn-danger button');
            btns.removeClass('dt-button');
        }
    });

    $('.buttons-excel').css("display", "none");

}

Screenshot:

[![enter image description here][1]][1]

Solution

Here is the issue, because is doing the same for columns with numbers.

var FTTXUGTotal = api.column(1).data().reduce(
                   function (a, b) { 
                      return intVal(a) + intVal(b); 
                   }, 0)
                 .toFixed(2);

I suppose to do something like this:

//var FTTXUGTotal = api.column(1).data(); //["Anantapur","Kakinada"]
//var FTTXARTotal = api.column(2).data() //[0.35,13.12]

var intVal = function (i) {
   let iString = typeof i === 'string';
   let iNumber = typeof i === 'number';
  return iString ? i.replace(/[\$,]/g, '') * 1 : iNumber ? i : 0;
};

let firstColumnData = ['5', 'Tirupati', '0.35', '11.53', '0.00', '11.53', '11.88']

let value = firstColumnData.reduce(function (a, b) { 
  let aCheck = isNaN(a) ? 0 : a;
  let bCheck = isNaN(b) ? 0 : b;
  return intVal(aCheck) + intVal(bCheck); 
}, 0).toFixed(2);

console.log(value)

How to implement it:


// inside snippet footerCallback

"footerCallback": function (row, data, start, end, display) {
   var api = this.api(), data;

  var intVal = function(i) {
    //readability
    let iString = typeof i === "string";
    let iNumber = typeof i === "number";
    return iString ? i.replace(/[\$,]/g, "") * 1 : iNumber ? i : 0;
  };

  var total = function(data) {
      return data.reduce(function(a, b) {
        let aCheck = isNaN(a) ? 0 : a;
        let bCheck = isNaN(b) ? 0 : b;
        return intVal(aCheck) + intVal(bCheck); 
      }, 0).toFixed(2);
  };

  var FTTXUGTotal = api.column(1).data();
  var FTTXARTotal = api.column(2).data();
  var FTTXMDUTotal = api.column(3).data();
  var TotFTTXUGTotal = api.column(4).data();
  var TotFTTXARTotal = api.column(5).data();
  var TotFTTXMDUTotal = api.column(6).data();

  $(api.column(0).footer()).html("Total");
  $(api.column(1).footer()).html(total(FTTXUGTotal));
  $(api.column(2).footer()).html(total(FTTXARTotal));
  $(api.column(3).footer()).html(total(FTTXMDUTotal));
  $(api.column(4).footer()).html(total(TotFTTXUGTotal));
  $(api.column(5).footer()).html(total(TotFTTXARTotal));
  $(api.column(6).footer()).html(total(TotFTTXMDUTotal));
}

After chatting in a discussion, we found the best way was:

$(api.column(1).footer()).html(isNaN(FTTXUGTotal) ? '' : FTTXUGTotal);