Write JSON Model in XML table - loop through items

Question

When writing my JSON data into the cells of my xml table, all the data are displayed below each other in only one column. The Column headers though, they get displayed correctly in individual columns. (My data comes from an excel file I'm uploading) Please advise me where my mistake is:

<m:Table id="testdata3">
<m:columns>                                 <!-- Columns created in controller -->
</m:columns>
<m:items>                                   <m:ColumnListItem id="columnsListItem" press="onPressListItem"  type="Navigation">                                   <m:cells>  
<!-- Cells created in controller -->    
         </m:cells>                         
        </m:ColumnListItem>
</m:items>
</m:Table>

controller:

_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) {
                    ... not relevant code ..
                    var aColumns = that.getColumnNames(worksheet);
                    var aData = that.getRowData(worksheet, result);     
                    var oModel = new sap.ui.model.json.JSONModel();
                    oModel.setData({
                        columns: aColumns,
                        rows: aData
                    });
                    oTable.setModel(oModel);
                    oTable.bindAggregation("columns", "/columns", function(index, context) {
                        return new sap.m.Column({
                            header: new sap.m.Label({
                                text: context.getObject().columnId
                            })
                        });
                    });

                    oTable.bindAggregation("items", "/rows", function(index, context) {
                        var roa = XLSX.utils.sheet_to_json(worksheet);

                        if(roa.length > 0){

                            result[worksheet] = roa;

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

                            return new sap.m.ColumnListItem({
                                cells: [
                                    new Text({ text :context.getObject().cellId })
                                    ]
                            })
                        };
                    });

                };
            };
        },

Here's a screenshot of the output data:

Answer 1

Controller

Try this example, please.

    onChange: function(oEvent) {
        var file = oEvent.getParameter("files")[0];
        var oTable = this.byId("testdata3");
        var reader = new FileReader();
        var that = this;
        reader.readAsBinaryString(file);
        reader.onload = function(e) {
            var data = e.target.result;
            var wb = XLSX.read(data, {
                type: "binary"
            });

            var firstSheetName = wb.SheetNames[0];
            var worksheet = wb.Sheets[firstSheetName];
            var oModel = new sap.ui.model.json.JSONModel();
            var aColumns = that.getColumnNames(worksheet);
            var aData = that.getRowData(worksheet);
            var aCells = that.getCells(aData);

            oModel.setData({
                columns: aColumns,
                rows: aData
            });

            oTable.setModel(oModel);
            oTable.bindAggregation("columns", "/columns", function(index, context) {
                return new sap.m.Column({
                    header: new sap.m.Label({
                        text: context.getObject().columnId
                    })
                });
            });

            oTable.bindAggregation("items", "/rows", new sap.m.ColumnListItem({
                // CHANGE ACCORDINGLY OR MAKE DYNAMIC
                cells: aCells
            }));
        };

    },

    getColumnNames: function(worksheet) {
        var oColumns = [];
        var cells = Object.keys(worksheet);
        for (var i = 0; i < Object.keys(cells).length; i++) {
            if (cells[i].indexOf("1") > -1) {
                var columnName = worksheet[cells[i]].v;
                oColumns.push({
                    columnId: columnName
                });
            }
        }
        return oColumns;
    },

    getRowData: function(worksheet, result) {
        var data = XLSX.utils.sheet_to_json(worksheet);
        return data;
    },

    getCells: function(aData) {
        var cells = [];
        var keys = Object.keys(aData[0]);
        for (var i = 0; i < keys.length; i++) {
            cells[i] = new sap.m.Text({
                text: "{" + keys[i] + "}"
            });
        }

        return cells;
    }