How to read data from a Gateway service using AJAX call and JSON Model

Hello Everyone,

In this blog i will tell you how to read data from a Gateway Service using AJAX call.

VIEW :-

//At first we will define the data array. I will tell you how we are going to use this data array.

Data =  [{

           Serial_Num : “”,

           Item_Number : “”

           Comp_Number : “”

           Comp_Desc : “”,

           Comp_Qty : “”,

           UOM : “”,

           Item_Category : “”,

           Item_Text : “”,

           Sort_String : “”,

           Storage_Loc : “”,

           Ph_Assign : “”,

           Alt_Item_Grp : “”,

           Priority : “”,

           Mfct_Code : “”,

           UsageProb : “”,

           Alt_BOM : “”

}];

//Then we will define the Table

oTable = new sap.ui.table.Table(“oTable”, {

                                     title : “BOM Items”,

                                         visibleRowCount : 10,

                                         selectionMode: sap.ui.table.SelectionMode.Single,

                                         navigationMode: sap.ui.table.NavigationMode.Scrollbar,

                                         width : “auto”

});

//Then we will add columns to our table

oTable.addColumn(new sap.ui.table.Column(“ColserialNumber”, {

                          label : “Sl.No.”,

                          width : “50px”,

                          template : new sap.ui.commons.TextView(“serialNumber”,{

                                    enabled : false

                          }).bindProperty(“text”,”Serial_Num”),

                    resizable : false

                }));

In a similar way i have added 10 more columns to my table based on my requirement.

Now let us see how i have used the data array in my table columns.

As you can see from the above piece of code that i have used .bindProperty(), and inside this bindProperty i am giving the properties “text” and “Serial_Num”.

The “text” is the property of the type of ui element we are using. Here i have used TextView so i have given property as “text”. If you want to use any ValueHolder UI element then you have to give property as “value” in place of “text”.

The “Serial_Num” is the key i have used in my data array.

Now,

We will set the model to the table so that we can read data from Gatewat service.

Controller : –

// Defining the model

  var oModel = new sap.ui.model.json.JSONModel();    //Defining a JSON Model

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

                              oModel .setData({modelData : Data});                      //Setting the data array defined by me to the model

  oTable.setModel(oModel );                                     // I have defined the instance of table(oTable) as global

  oTable.bindRows(“/modelData”);                             //Performing bindRows(“/modelData”), so that data gets bind to the corresponding row.

//After this making an ajax call to bind the data coming from service with our custom defined data array which is again bound to the table.

$.ajax({

                                  type: ‘GET’,

                                  url : “your_service_url”,

                                  dataType: ‘json’,

                                  success: function(data,textStatus,jqXHR) {

                                                  console.log(data);                       

     },

     error : function(jqXHR,textStatus,errorThrown) {

     }

Here, console.log() is a printing statement. I am trying to print the response which i am getting from from the service in the console which looks something like this

Now, i will show you how i will map the data coming from service with my data array.

$.ajax({

                                  type: ‘GET’,

                                  url : “your_service_url”,

                                  dataType: ‘json’,

                                  success: function(data,textStatus,jqXHR) {

                                                  console.log(data);                       

                                        for(var i = 0 ; i < data.d.results.length ; i++)

                                                                                          {

                                                  Data[i].Comp_Desc= data.d.results[i].Comp_Desc;

                                                  Data[i].Comp_Qty= data.d.results[i].Comp_Qty;

                                                  Data[i].Comp_Number = data.d.results[i].Comp_Number ;

                                             }   

                                        oTable.bindRows(“/modelData”);

     },

     error : function(jqXHR,textStatus,errorThrown) {

     }

Now let us see what i am doing in the success of the Ajax call.

Here i am running a loop on the length of the data, which i am getting from service.

Then manually setting each of the properties which was defined in the data array to the data coming from backend,

eg:-  Data[i].Comp_Desc= data.d.results[i].Comp_Desc;

You must be thinking what is this data.d.results,

You can see in the screenshot above that inside the Object node(which is nothing but the data node), we have child node ‘d’, and this child node again has another child node ‘results’, which contains the actual data.

So in order to fetch the data we are traversing through this tree using data.d.results.

Now again there can be multiple number of data coming from backend which will bind to the rows of our table. So we are running a loop on data.d.results.length so that different sets of data are mapped to corresponding rows.

We are done now.

Let’s see the result.

You will get something like this,

Points to remember : –

1. Define the data array based on the response you are getting from the service, try to give the same name for better understanding.

2. Make sure that in each bindProperty you are doing, correct property is binded, else you will get unexpected results.

3. Whenever we will fire a read service then automatically this bindProperty() will map,for example “Serial_Num” key to the column to which it is binded.

4. Make sure the data array is set to the model and the model is set to the table.

5. Do not forget to do bindRows, in this case oTable.bindRows(“/modelData”);

6. Before mapping the data first take a look how response is coming from service, use console.log(data) for this.

Hope this blog will help.

There may be different ways of reading data from Gateway service.

But this suits me well. 🙂

Any feedback is welcomed. 🙂

Thanks.