Karas Karas - 3 months ago 29
JSON Question

UI5 JS update table by button

I'm new to UI5 and JS and trying to practice development of UI5 apps in WebIDE.

In this scenario I made in XML view a table which is populated by JSON module. There are few inputs with button. I would like to add values entered to fields to table (and also update that JSON module).
Thank you for any guidance or help.

I got error on line - Cannot read property 'push' of undefined
var newBp = oModel.getProperty("/hosesMbh");

Jan

sap.ui.controller("com.sapx05.view.View1", {
onInit: function() {
var oData = {
"hosesMbh": [{
"orderNumber": "1275043",
"materialNumber": "6460000214",
"amountOrdered": "640m",
"amountProduced": "200m",
"openAmount": "440m"
}, {
"orderNumber": "1275044",
"materialNumber": "6442041132",
"amountOrdered": "640m",
"amountProduced": "200m",
"openAmount": "440m"
}, {
"orderNumber": "1275083",
"materialNumber": "6460000219",
"amountOrdered": "640m",
"amountProduced": "200m",
"openAmount": "440m"
}, {
"orderNumber": "1275088",
"materialNumber": "6460000229",
"amountOrdered": "640m",
"amountProduced": "200m",
"openAmount": "440m"
}, {
"orderNumber": "1275089",
"materialNumber": "6460000239",
"amountOrdered": "640m",
"amountProduced": "200m",
"openAmount": "440m"
}]
};
var JSONModel = new sap.ui.model.json.JSONModel(oData);
JSONModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
sap.ui.getCore().setModel(JSONModel);

var XMLModel = new sap.ui.model.xml.XMLModel();
$.get("data.xml", function(data) {
XMLModel.setXML(data);
sap.ui.getCore().setModel(XMLModel,"xml");
}, "text");
},

onBtnClickAdd: function(oData, JSONModel) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("/hosesMbh");
var newBp = oModel.getProperty("/hosesMbh");
var addOrder = {
orderNumberAdd: this.getView().byId("orderNumberAdd").getValue(),
materialNumberAdd: this.getView().byId("materialNumberAdd").getValue(),
amountOrderedAdd: this.getView().byId("amountOrderedAdd").getValue(),
amountProducedAdd: this.getView().byId("amountProducedAdd").getValue(),
openAmountAdd: this.getView().byId("openAmountAdd").getValue()
};
newBp.push(addOrder);
JSONModel.setProperty("/hosesMbh", newBp);
}
});

Answer

You create a new JSON model in your onBtnClickAdd mehtod without any data in it. Therefore this model does not contain the property /hosesMbh. Instead you should get the model from the core, which you create in the onInit method.

onBtnClickAdd: function(oData, JSONModel) {
    var oModel = sap.ui.getCore().getModel();
    oModel.loadData("/hosesMbh");
    var newBp = oModel.getProperty("/hosesMbh");
    var addOrder = {
        orderNumberAdd: this.getView().byId("orderNumberAdd").getValue(),
        materialNumberAdd: this.getView().byId("materialNumberAdd").getValue(),
        amountOrderedAdd: this.getView().byId("amountOrderedAdd").getValue(),
        amountProducedAdd: this.getView().byId("amountProducedAdd").getValue(),
        openAmountAdd: this.getView().byId("openAmountAdd").getValue()
    };
    newBp.push(addOrder);
    JSONModel.setProperty("/hosesMbh", newBp);
}
Comments