JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<body onLoad="initForm('#excelDataTable')">
  <div id="excelDataTable" border="1">
  </div>
  
</body>

JavaScript

var myList = {
  "success": true,
  "value": {
    "R1": 23107,
    "R2": 587,
    "R3": 207,
    "R4": 128,
    "R5": 515,
    "remark": null
  }
}

function initForm(selector) {
  if (response.success == "true") {

    var arrForTable = [];
    var totalVal = 0;
    var itemRow = {};
    itemRow["LKR 1 to 2.5 Million"] = response.value.R1;
    itemRow["LKR 2.5 to 5 Million"] = response.value.R2;
    itemRow["LKR 5 to 7.5 Million"] = response.value.R3;
    itemRow["LKR 7.5 to 10 Million"] = response.value.R4;
    itemRow["LKR 10 Million and Above"] = response.value.R5;

    arrForTable.push(itemRow);


    var htmlTxTable = buildHtmlTable(arrForTable, selector);
    $("#div-PortfolioDistribution").html(htmlTxTable);
  } else alert("Failure to Fetch data " + response.value.remark);
}


// Builds the HTML Table out of myList.
function buildHtmlTable(data, name) {
  var columns = getColumns(data);
  var columnHtml = getHtmlColumnHeaders(columns);
  var tableStr = '';
  var rowStr = '';

  if (name != null) {
    tableStr = '<table id="' + name + '" class="table table-condensed"><tbody>';
  } else tableStr = '<table class="table table-condensed"><tbody>';

  for (var i = 0; i < data.length; i++) {

    var colStr = '';
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = data[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      var num = 0;

      try {
        num = parseFloat(cellValue);
        num = Math.round(num * 100) / 100;
        console.log(num);
      } catch (e) {
        num = 0;
      }

      if (!isNaN(num)) {
        colStr = colStr + '<td align="right">' + numberWithCommas(num) + '</td>';
      } else colStr = colStr + '<td>' + cellValue + '</td>';
    }

    rowStr = rowStr + '<tr>' + colStr + '</tr>';
  }

  tableStr = tableStr + columnHtml + rowStr + '</tbody><tfoot></tfoot></table>';

  return tableStr;
}
// Adds a header row to the table and returns the set of...