Skip to Content
0
Sep 18, 2018 at 12:06 PM

Dynamically fill table with JSON Data binding

1509 Views

I have the following functions to upload an excel file and display it in my sapui5 view table. I'm using the third party library SheetJS to achieve the upload.

When uploading a file, I get an error, that the "aggregation "/items" doesn't exist in my table". Does anybody know how I can fill the table? Maybe I have to loop through all the objects in my JSON Model?

Thank you!

onXLSXupload : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]);
},
_import : function(file) {
var oTable = this.getView().byId('testdata3');
if(file && window.FileReader){
var reader = new FileReader();
var result = {}, data;
var that = this;
reader.readAsBinaryString(file);
reader.onload = function(e) {
var rawLog = reader.result;
console.log(rawLog);
data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
wb.SheetNames.forEach(function (sheetName) {
var rObjArr = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
if (rObjArr.length > 0) {
result[sheetName] = rObjArr;
}
var output = JSON.stringify(result, 2, 2);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({items: rObjArr});

    oTable.setModel(oModel);
    oTable.bindAggregation('/items');
});

console.log('output');
console.log(output);
};
};
},
that's how my xml structure of the table looks like:
<m:Panel header="Sheet Uploader">
       <up:FileUploader id="sheetUploader" name="myFileUpload" tooltip="Uplo           ad your file to the local server" change="onXLSXupload"></up:File           Uploader>
        <m:Table id="testdata3"/>
</m:Panel>