Handsontable JSON returns undefined

I’m fairly new to Handsontable and JS, JSON usage in particular. Any help would be appreciated. In the debugger on line 131, ‘data[row].temp_source_data’ = undefined. I can’t seem to figure out why there is no value returned. I’ve included the js file. Thanks!

var hot;
var hotContainer;
var invalidCells = 0;
var forceRender = false;
var vendorSites = [];
var defaultVendorSite;
var gValidPo = true;
var supplier_number = [];
var data = [];
var errorIcon = '<i class="fa fa-exclamation-triangle fa-lg" style="color:red;"></i>';

// Create empty handsontable instance
function createEmptyHot(pRegion){
  setHotContainer(pRegion);
  hotContainer.height = getMaxHeight();
  assembleHot(hotContainer, data, getMaxHeight(hotContainer));
}

function setHotContainer(pId){
    hotContainer = document.getElementById(pId);
}

// Get max height of the handsontable instance
function getMaxHeight(){
  var maxHeight = (window.innerHeight - jQuery(hotContainer).offset().top * .8);
  return maxHeight;
}

//Assemble the handsontable instance
function assembleHot(pContainer, pData, pHeight){
    // Hook functions
    // Handle before change event
    function handleBeforeChange(changes, source) {
        var prop = "supplier_number";
        var row;
        var val;
        for (var i = 0; i < changes.length; i++) {
          if (changes[i][1] === prop && changes[i][2] !== changes[i][3]) {
            row = changes[i][0];
            val = changes[i][3];
            if (hot.getData()[row].supplier_site) {
             hot.getData()[row].supplier_site = '';
           }
            apex.server.process('GET VENDOR SITES',
                                {x01: val},
                                {async: false,
                                 dataType: "json",
                                 success:function(pData){
                                   hot.getData()[row].temp_source_data = pData;
                                   console.log(pData);  //DR
                                 }
                                }
                               );
          }
        }
    }

    hot = new Handsontable(pContainer, {
    data:pData,
    rowHeaders:true,
    colHeaders: [
      "<strong>Supplier Number<span class='required'>*</span></strong>",
      "<strong>Supplier Site</strong>",
      "<strong>Invoice Date</strong>",
      "<strong>Invoice Number</strong>",
      "<strong>Task Number</strong>",
      "<strong>Project Number</strong>",
      "<strong>Line Description</strong>",
      "<strong>Expenditure Type</strong>",
      "<strong>Ext Price</strong>",
      "<strong>Tax Amount</strong>",
      "<strong>Status</strong>"
    ],
    contextMenu:true,
    minSpareRows:pHeight / 28,
    minCols:16,
    maxCols:16,
    height:pHeight,
    beforeChange: handleBeforeChange,
    columns: [
     {
       data:"supplier_number",

     },
    {
      data:"supplier_site",
      type:"dropdown",
      source:vendorSites,
      width:250
    },
    {
      data:"invoice_date",
      type:"date",
      dateFormat:"MM.DD.YYYY"
    },
    {
      data:"invoice_num"
    },
    {
      data:"task_num"
    },
    {
      data:"project"
    },
    {
      data:"line_description"
    },
    {
      data:"expenditure_type",
      width: 250
    },
    {
      data:"ext_price",
      type:"numeric",
      format:"$0,0.00",
      language:"en"
    },
    {
      data:"tax_amount",
      type:"numeric",
      format:"$0,0.00",
      language:"en"
    },
    {data:"status",
     readOnly:true,
     renderer:invalidRowRenderer}
  ],
  cells: function(row, col, prop){
    if (prop === 'supplier_site') {
      var cellProperties = this;
      var vendorSites    = data[row].temp_source_data;
      var vendorSitesArr = [];
      if (vendorSites && vendorSites.length) {
        for (var i = 0; i < vendorSites.length; i++) {
          vendorSitesArr.push(vendorSites[i].supplier_site);
        }
        cellProperties.source = vendorSitesArr;
        hot.getData()[row][prop] = vendorSitesArr[0];
      }
    }
  }
});
}

// Renderers

 function invalidRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
   $(td).empty();
    var isInvalid = instance.getData()[row].has_error;
    if (isInvalid) {
      $(td).append(errorIcon);
      td.style.textAlign = 'center';
    }
    td.style.backgroundColor = '#E8E8E8';
}

/* If row has error, append error icon and highlight row kakhi.
function errorInRowRenderer(instance, td, row, col, prop, value, cellProperties) {
 Handsontable.renderers.TextRenderer.apply(this, arguments);
   var isInvalid = instance.getData()[row].has_error;
   if (isInvalid) {
     $(td).append(errorIcon);
     td.style.textAlign = 'center';
   }
   td.style.backgroundColor = '#E8E8E8';
   row.style.backgroundColor = 'kakhi';
}
*/

// Get all handsontable data

function getHotData(){
  return hot.getData();
}

// Do ajax with Handsontable data

function doAjax(){
  var data = JSON.parse(JSON.stringify(getHotData()));
  // Remove empty lines
  for (var i = 0; i < data.length; i++){
    if (jQuery.isEmptyObject(data[i])){
      data.splice(i, 1);
      i--;
    }
  }
}

// Validate handsontable data before submit

function validateHotData(){
  var data = {data:[]};
  var tempObj;
  for (var i = 0; i < hot.getData().length; i++ ){
    delete hot.getData()[i].has_error;
    if (!isEmptyRow(i)) {
      tempObj = {};
      tempObj = JSON.parse(JSON.stringify(hot.getData()[i]));
      tempObj.hot_idx = i;
      data.data.push(tempObj);

    }
  }
  apex.server.process('STAGE DATA',
                      {p_clob_01: JSON.stringify(data)},
                      {success:function(pData) {
                        // If we have invalid rows, flag them
                        if (pData.length > 0) {
                          for (var i = 0; i < pData.length; i++) {
                            rownum = pData[i].rownum;
                            hot.getData()[rownum].has_error = true;
                          }
                          hot.render();
                        } else {
                          for (var i = 0; i < hot.getData().length; i++) {
                            delete hot.getData()[i].has_error;
                          }
                          hot.render();
                        }
                       }
                      }
                     )

}

function handleSubmit(){
  forceRender = true;
  // Validate the data set
  var validity = validateHotData();
  if (validity){
    doAjax();
  }
}

// Utility - determine if a hot row is empty
function isEmptyRow(row) {
  delete hot.getData()[row].temp_source_data;
  delete hot.getData()[row].status;
  delete hot.getData()[row].has_error;
  if (jQuery.isEmptyObject(hot.getData()[row])) {
    return true;
  } else {
    return false;
  }
}

enter image description here

Answer

Have you tried using hot.getSourceData() instead of hot.getData()?

They recently changed the functionality of hot.getData() in their latest release which has been causing similar issues for other people.

Leave a Reply

Your email address will not be published. Required fields are marked *