How to bind dynamic data to a table in sapui5? - sapui5

Question

I am trying to bind dynamic data to a table created in xml. But I couldn't make it. I am not getting any errors but it always shows "No Data Available". Here is what I have tried.
App.view.xml :-
<sap.ui.layout:HorizontalLayout xmlns:sap.ui.layout="sap.ui.layout" id="table_layt">
<sap.ui.layout:content>
<Table noDataText="No Data Available" id="bud_table" class="table_layt">
<items></items>
<columns>
<Column id="c1">
<header><Label text="Account Description" id="aclab"/></header>
</Column>
<Column id="c2">
<header><Label text="Actual" id="actlab"/></header>
</Column>
<Column id="c3">
<header><Label text="Budget" id="budglab"/></header>
</Column>
<Column id="c4">
<header>
<Label text="Variance" id="valab"/></header>
</Column>
</columns>
</Table>
</sap.ui.layout:content>
App.controller.js :-
var oTable = this.getView().byId("bud_table");
var oTemplate = new sap.m.ColumnListItem({
cells:[
new sap.m.Label({
text:"{AccountDesc}"
}),
new sap.m.Text({
text:"{AmtActFore}"
}),
new sap.m.Text({
text:"{AmtBudget}"
}),
new sap.m.Text({
text:"{AmtVariance}"
})
]
});
oTable.bindItems("/root", oTemplate);
And my data looks like this :-
data
Object {root: Array[64]}
root: Array[64]
0: Object
AccountDesc: "blah"
AccountNo: "blah"
AmtActFore: "blah"
AmtBudget: "blah"
AmtVariance: "blah"

Answer 1

I think you're missing the part where you're pushing the data into a model:
this.getView().setModel(
new sap.ui.model.json.JSONModel({
root: [{
AccountDesc: "blah",
AccountNo: "blah",
AmtActFore: "blah",
AmtBudget: "blah",
AmtVariance: "blah"
}]
}));
Please refer to this JSBin for a working example of your code, including the model initialisation part.