Import from Excel with AngularJS

Question

I am trying to import the Excel in to the ui-grid. I am trying to use the js xlsx library. I can convert the xlsx in to JSON but I am not sure how I can populate the xlsx in to the ui-grid. Below is the ui-grid:

$scope.samplesGridOptions = {
    enableColumnResizing: true,
    enableRowSelection: true,
    multiSelect: false,
    enableGridMenu: true,
    enableCellEditOnFocus: true,
    columnDefs: [
        { field: 'externalID', displayName: 'External ID' },
        { field: 'apexLotNum', displayName: 'APEX Lot' },
        {
            field: 'chamberName',
            displayName: 'Chamber Name',
            editType: 'dropdown',
            editableCellTemplate: 'ui-grid/dropdownEditor',
            enableCellEdit: true, editDropdownOptionsArray: $scope.chamberNameList,
            editDropdownIdLabel: 'value',
            editDropdownValueLabel: 'value'
        }
    ],
    gridMenuCustomItems: [],
    onRegisterApi: function (gridApi) {
        $scope.samplesGridAPI = gridApi;
        $scope.samplesGridOptions.data = $scope.virtualSampleList;
    }
};

I am trying to use the the js-xlsx library below to parse the excel file loaded. But not sure how to push that into the ui-grid, new to Javascripting and the libraries.

$scope.ParseExcelDataAndSave = function () {
    var file = $scope.SelectedFileForUpload;
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, { type: 'binary' });
            var sheetName = workbook.SheetNames[0];
            var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var jsonData = JSON.stringify(excelData);
            if (jsonData.length > 0) {
                    **//Here I am not sure how can I populate the ui-grid from the JSON**
            }
            else {
                $scope.Message = "No data found";
            }
        }
        reader.onerror = function (ex) {
            console.log(ex);
        }
        reader.readAsBinaryString(file);
    }
}

Answer 1

This is the example given in the js-xlsx documentation:¹

$http({
    method:'GET',
    url:'https://sheetjs.com/pres.xlsx',
    responseType:'arraybuffer'
}).then(function(response) {
    var wb = XLSX.read(response.data, {type:"array"});
    var d = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    $scope.data = d;
}, function(err) { console.log(err); });

For files use:

function fileToArrayPromise(file) {
    var promise = $q(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            resolve(data);
        }
        reader.onerror = function (ex) {
            reject(ex);
        }
        reader.readAsArrayBuffer(file);
    })
    return promise;
}

fileToArrayPromise(file)
  .then(function(data) {
    var wb = XLSX.read(data, {type:"array"});
    var d = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    $scope.data = d;
}, function(err) {
    console.log(err);
    throw err;
});

For more information, see

• SheetJS Demos - AngularJS