How can I populate a text box with data from JSON using SAPUI5?
// Sample JSON data
var data = {
firstName: "John",
lastName: "Doe",
birthday: {day:01,month:05,year:1982},
address:[{city:"Heidelberg"}],
enabled: true
};
// Create a JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
// Set the data for the model
oModel.setData(data);
// Set the model to the core
sap.ui.getCore().setModel(oModel);
// Create your controls
var oTextView = new sap.ui.commons.TextView("textView", {
// Bind text property of textview to firstName property in the model
text: "{/firstName}",
tooltip: "First Name"
});
var oTxt = new sap.ui.commons.TextField("txtField", {
// Bind text property of textfield to firstName property in the model
value: "{/firstName}"
});
The above code works fine, but when I move the JSON data to a separate file and try to load it, the data does not get loaded.
Currently, my JSON file looks like this:
{
"UserDetails":[
{
"userid": "Test-Id",
"sapname": "Test-SAP-Form",
"age": 37,
"annualleave": 32
}
]}
When trying to load data from the JSON file, I use the following code:
var userDetailsModel = new sap.ui.model.json.JSONModel();
userDetailsModel.loadData("json/UserDetails.json");
userDetailsModel.setData("json/UserDetails.json");
sap.ui.getCore().setModel(userDetailsModel, "UserDetails");
However, I am unable to display the data in the text box. What mistake am I making?