CODEWITHSUNDEEP
javascriptjsonsapui5
Shiladittya Chakraborty
Shiladittya Chakraborty

Reputation: 4418

Display data into text box from json in SAPUI5

I want to display data into text box from JSON using SAPUI5.

// JSON sample data
var data = {
    firstName: "John",
    lastName: "Doe",
    birthday: {day:01,month:05,year:1982},
    address:[{city:"Heidelberg"}],
    enabled: true
};

// create 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}"
});

Above code is working but I when I transfer the json data in JSON file and tried to load on this scenario data are not loaded.

Right Now my Json file look like : 

{
  "UserDetails":[
{
  "userid": "Test-Id", 
  "sapname": "Test-SAP-Form", 
  "age": 37, 
  "annualleave": 32
}
]}

When transfer Json data in Json file then I used below code to load data :

var userDetailsModel = new sap.ui.model.json.JSONModel();
userDetailsModel.loadData("json/UserDetails.json");
userDetailsModel.setData("json/UserDetails.json");
sap.ui.getCore().setModel(userDetailsModel, "UserDetails");

But I am unable to display data into TextBox.

What is my mistake?

Upvotes: 1

Views: 4865

Answers (1)

herrlock
herrlock

Reputation: 1454

The (simple) syntax for databinding is {model>path}, so when you do setModel(model, "modelname") you need to do {modelname>path}.

In your case the required value is 

var oTxt = new sap.ui.commons.TextField("txtField", {
    // bind text property of textfield to firstName property in the model
    value: "{UserDetails>/firstName}"
});

And remove the line with model.setData, as Qualiture mentioned in his comment

Edit: Your JSON-file is different to the path you are passing to the Controls. With that structure you need to set the path to {UserDetails>/UserDetails/0/firstName}

Upvotes: 1

Related Questions