cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

JSON data in SAPUI5

Go to solution
Former Member

on ‎12-13-2013 7:26 AM

0 Kudos

[{"NscItem":"","SapItem":"000000000009999999","ManufacturerPart":"","Upc":"","Uom":"EA","CasePack":"","Manufacturer":"","Name":"","Description":"Unidentrified Item"},{"NscItem":"","SapItem":"000000000001003096","ManufacturerPart":"412WN","Upc":"","Uom":"CS","CasePack":"1000","Manufacturer":"0000100119","Name":"Solo Cup\/Swthrt\/Clrshield","Description":"Cup Paper Hot 12 Oz W\/Hndl Wht"}]



hey i want to call the above JSON data in a Table in SAPUI5 ...By storing this data in my local Host an call it in SAPUI5......can you please guide me ......

I used this code but not working

<html>

<head>

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

  <title>SAPUI5 Conditional Databinding</title>

  <script src="resources/sap-ui-core.js"

    type="text/javascript"

    id="sap-ui-bootstrap"

    data-sap-ui-libs="sap.ui.commons,sap.ui.table"

    data-sap-ui-theme="sap_goldreflection">

  </script>

  <script>

    jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);

        // create the DataTable control

        var oTable = new sap.ui.table.Table({editable:true});

        // define the Table columns

        var oControl = new sap.ui.commons.TextView({text:"{/NscItem}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Posting"}), template: oControl }));

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

        var aData =

        jQuery.ajax({

           url: "http://localhost/client.json",  // for different servers cross-domain restrictions need to be handled

           dataType: "json",

           success: function(data, textStatus, jqXHR) { // callback called when data is received

            oModel.setData(data);             // fill the received data into the JSONModel

  alert("sparta");

           },

           error: function(jqXHR, textStatus, errorThrown) {

          alert("error");

           }

        });

         oTable.setModel(oModel);

        oTable.bindRows("/");

        // finally place the Table into the UI

        oTable.placeAt("dataTable");

  </script>

</head>

<body class="sapUiBody">

  <h1>SAPUI5 Conditional Databinding</h1>

  <div id="dataTable"></div>

</body>

</html>

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member91307
Contributor
‎12-13-2013 8:24 AM
0 Kudos

Hi Vishnu,

A forward slash is not required while binding in above code "sap.ui.commons.TextView({text:"{/NscItem}"});"

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

The property 'NscItem' does not contain any value

Json file can be stored in the same project below message might help

http://scn.sap.com/thread/3464511

Thanks and Regards, Venkatesh

Show replies
Show replies
Former Member
‎12-13-2013 10:11 AM
0 Kudos

Hi Venkatesh,

Thanx for spending your time for me.

I saw the below link

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

Can you try to do the same thing...storing the Jason data in your local host and try and send me the code .........Beacuse i tried but its not working ....

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

this is my link

Former Member
‎12-13-2013 11:03 AM
0 Kudos

OK friend at last the below code worked for me     A great thanx for Venkatesh

<html>

<head>

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

  <title>SAPUI5 Conditional Databinding</title>

  <script src="resources/sap-ui-core.js"

    type="text/javascript"

    id="sap-ui-bootstrap"

    data-sap-ui-libs="sap.ui.commons,sap.ui.table"

    data-sap-ui-theme="sap_ux">

  </script>

  <script>

    jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);

        // create the DataTable control

        var oTable = new sap.ui.table.Table({editable:true});

      

        // define the Table columns

      

        var oControl = new sap.ui.commons.TextView({text:"{NscItem}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "NscItem"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{SapItem}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SapItem"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{ManufacturerPart}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "ManufacturerPart"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{Upc}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Upc"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{Uom}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Uom"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{CasePack}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "CasePack"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{Manufacturer}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Manufacturer"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{Name}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Name"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{Description}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Description"}), template: oControl }));

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

  

        var aData =

        jQuery.ajax({

           url: "http://localhost/client.json",  // for different servers cross-domain restrictions need to be handled

           dataType: "json",

           success: function(data, textStatus, jqXHR) { // callback called when data is received

            oModel.setData(data);             // fill the received data into the JSONModel

  alert("sparta");

           },

           error: function(jqXHR, textStatus, errorThrown) {

          alert("error");

           }

        });

        oTable.setModel(oModel);

        oTable.bindRows("/");

      

        // finally place the Table into the UI

        oTable.placeAt("dataTable");

  </script>

</head>

<body class="sapUiBody">

  <h1>SAPUI5 Conditional Databinding</h1>

  <div id="dataTable"></div>

</body>

</html>

Answers (0)

Ask a Question