cancel
Showing results for 
Search instead for 
Did you mean: 

Data binding from JSON object not working. Please let me know if any thing missing here

0 Kudos

<!

DOCTYPE html>


<

html><head>


   

<meta http-equiv='X-UA-Compatible' content='IE=edge' />


   

<meta charset="UTF-8">


   

<title>test</title>



<script id='sap-ui-bootstrap' type='text/javascript'


       

src='/SAPUI5_P2/resources/sap-ui-core.js'


       

data-sap-ui-theme='sap_goldreflection'


       

data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>


       

<!-- add 'sap.ui.table' and/or other libraries if required -->



<

script>


   

// JSON sample data


   

var data = {


        firstName:

"John", lastName: "Doe",


        birthday: { day: 01, month: 05, year: 1982 },


        address:[{ city:

"Heidelberg" }], enabled: true


    };



var oModel = new sap.ui.model.json.JSONModel(); // create JSON model instance


    oModel.setData(data);

// set the data for the model


    sap.ui.getCore().setModel(oModel);

// assign the model to the core



var oTxt = new sap.ui.commons.TextField("txtField", {


        value:

"{firstName}" // binding syntax using curly braces


    });



// generic bind method bindProperty(control property, model property)


    oTxt.bindProperty(

"enabled", "enabled");



    oTxt.placeAt(

"content");


   


</

script>



</

head>


<

body class='sapUiBody'>


   

<div id='content'></div>


</

body>


</

html>

Accepted Solutions (1)

Accepted Solutions (1)

0 Kudos

Its resolved now.  I think while binding to control reverse slash(/) required like

{/firstName}

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi Rama,

I tried out your code in my own project, all I had to do to get it to work was fix the reference to the sap-ui-core.js file. Here is the code after I made the change:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

<meta charset="UTF-8">

<title>test</title>

<script id='sap-ui-bootstrap' type='text/javascript'

          src='resources/sap-ui-core.js'

          data-sap-ui-theme='sap_goldreflection'

          data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>

<!-- add 'sap.ui.table' and/or other libraries if required -->

<script> // JSON sample data

var data = { firstName: "John",

                    lastName: "Doe",

                    birthday: { day: 01, month: 05, year: 1982 },

                    address:[{ city: "Heidelberg" }],

                    enabled: true };

 

var oModel = new sap.ui.model.json.JSONModel();

// create JSON model instance

oModel.setData(data); // set the data for the model

sap.ui.getCore().setModel(oModel); // assign the model to the core var

oTxt = new sap.ui.commons.TextField("txtField", { value: "{firstName}" });

// generic bind method bindProperty(control property, model property)

oTxt.bindProperty("enabled", "enabled"); oTxt.placeAt( "content");

</script>

</head>

<body class='sapUiBody'>

<div id='content'></div>

</body> </html>

Your project should have a resources folder in it. You can reference the sap-ui-core.js using src="resources/sap-ui-core.js"

Here is the result:

I hope this helps,
Simon

0 Kudos

It is still not working in my project.  I think I don't have correct sap-ui-core.js file.  Could you please send correct sap-ui-core.js file or winzip the project and send it to me?

Former Member
0 Kudos

Hi Rama,

I just downloaded it from here: http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/c08465d5-b833-2f10-e59d-f67a5c...

Make sure you have the most recent release from SAP.

Thanks,
Simon

0 Kudos

Even I created resources folder and placed in sap-ui-core.js file.  Its still not showing First Name "John" in Text filed.

Former Member
0 Kudos

What error do you see? What tool are you using to debug?

Former Member
0 Kudos

Instead of creating sample data, I want to do make a call to a web service that will return JSON or XML.

Do you have any examples of that?