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

1) either loop through the excelData array and build a ui-grid data object. 2) or if object return by excelData is already in a key/value format then just make that equal to ui-grid data. 3) if you have the colum names then loop through those and get the equivelent value from excelData array and push that into ui-grid data. — Axar
– Axar, Commented May 16, 2018 at 17:38
@Axr Yeah I can loop through and do them. but looking if there is any directive for directly pushing in to the ui-grid — trx
– trx, Commented May 16, 2018 at 17:40

georgeawg · Accepted Answer · 2019-12-16 00:45:50Z

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

Collectives™ on Stack Overflow

Import from Excel with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related