How to get Data from sap.ui.model.json.JSONModel() from OData Service

[Former Member]

Hello Experts,

We are new to SAP and creating mobile app for both iOS and Android with PhoneGap/Apache Cordova. We are developing the app using SAPUI5 HTML/JavaScript.

We are facing issues in setting and getting data model with sap.ui.model.json.JSONModel() from OData Service. The app is built in the sap.m.pages style with HTML, i.e. within a HTML page we have created "sap.m.pages".

We tried two different approaches as given below

APPROACH 1 ->

Code which is being used is as below:

var data = sap.ui.getCore().getModel().getData();

    onSuccess = function(result)

    {

        alert("From OnSuccess");

sap.ui.getCore().getModel().setData(data);

alert("Model is set");

    };

    var onError = function(err) {

        window.alter(err.response.body);

    };

    connectionData = {

        DeviceType : "ios"

    };

    connectionRequestLogin = {

        requestUri: "https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT",

        headers: { Authorization : "Basic " + btoa("username:password")},

        method: "POST"

        //data: connectionData

    };

    alert("Requesting OData.read");

    OData.request( connectionRequestLogin, onSuccess, onError);

We are not using the SAP HANA Cloud Platform at this instance as it is out of scope for us.

When the OData.request code is fired, the out comes are strange.

1. When we check in both Browsers(Chrome, Firefox and Safari) and simulator as well as real iPad and Android phone, we get "No Access".
2. Some times the onSuccess function is executed in the simulator and device, but the   sap.ui.getCore().getModel().setData(data); is not being executed as we do not get the alert which is exactly after the sap.ui.getCore().getModel().setData(data) statement.
3. At times even is the code execution passes through the sap.ui.getCore().getModel().setData(data) statement, there is no effect.

Could you please let me know, if there is something being missed out or any changes nned to be made.

Please post the sample code to get the OData service from service and to set it into the sap model and how to retrieve the data from the model and display it into UI fields such as sap.m.Input, etc.

APPROACH 2 ->

In the second approach, we tried following code

function makeBasicAuth(uname, pword){

    var tok = uname + ':' + pword;

    var hash = Base64.encode(tok);

    //alert("The Authentication details are : " + tok);

    return "Basic " + hash;

}

function makeRequest()

{

var auth =  makeBasicAuth('username','password');

var req = new XMLHttpRequest();

        req.open("GET", "https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT/FlightCollection?$format=json", true);

        req.setRequestHeader('Authorization', auth);

        req.onreadystatechange=function(){

            if(req.readyState == 4 && (req.status==200)){

     alert("Query Firing Successful");

                    alert("obj is : " + obj);

                    alert("The 'var type' is : "+ type);

                    for (var i = 0; i < 3 /*obj.d.results.length*/; i++ ){

                        //$('#airlines').append('<li><a href="'+ obj.d.results[i].cityTo +'">' + obj.d.results[i].countryTo + ' (' + obj.d.results[i].countryFrom + ')' + ' </a></li>');

                        alert("Rec # "+ i + " City To : "+obj.d.results[i].cityTo + " Country To: "+obj.d.results[i].countryTo );

                       oModel.setData(obj.d.results);
              
                   sap.ui.getCore().setModel(obj.d.results);

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

                    }

                    App.to("landingPage");

                } else {

                    //console.log("Type is: " + type);

                    //document.getElementById('airelement').innerHTML = "<textarea id='txArea' cols='63' rows='60'>" + req.responseText + "</textarea>";

                }

            } else if(req.readyState === 4 && (req.status=401)){

                alert("No Access. Please check your internet connection.");

            }

        }

    //    alert("Firing out the request");

        // send the request now

        req.send();

}

Here again in this approach, we are able to see the data in the alert but having issues in setting the oModel.

Please help me out my posting a sample code to set the model with the data returned from OData Service and how to set and retrieve the data into sap.m.Input and other UI components.

NOTE ->

For this APPROACH 2, we are able to see the output in Eclipse IDE and iOS and Android real device and simulator, but no output is available in Web Browsers and having issues  to set and get data into oModel.

Any help is highly appreciated.

Thanks and Regards,

Suraj.

[prabhuarul]

Hi Suraj,

Did you fix the issue? i am getting simular kind of issues..

Rgds,

Prabhu

[Former Member]

Hello Prabhuarul,

Please go through the code below. The following code works fine to get data from the Backend using Odata Service and set the data Model. And from the Data Model, we can access the data fields.

//Create an instance of sap.ui.model

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

// Fire the "OData.read" request

OData.read({ requestUri: " OData_Service_URL ",

headers: { Authorization : 'Basic ' + Base64.encode(dataUsername + ":" + dataPassword) }, },

function (data) // data is the data model returned on Successful read request

{

var myData = {}; // Create an instance to store the OData Model

myData.results = data.results; // data.results hold the data returned from the Service

//Store the OModel

oModel.setData(myData);

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

//To retrieve data from the OModel

var customerName=myData.results[0].CustomerName;

alert("Customer Name : " + customerName);

},

function(err)

{

alert("Error !!!");

}

);

Hope you find this piece of code to be useful.

Do let me know.

Regards,

Suraj.