oModel.read, JSON.parse & JSONModel

While developing SAPUI5 applications there would be scenarios where you can’t set the oModel directly to an UI control (e.g.: sap.m.List or Table). We need to massage the data and change it to a structure that fulfils the requirement then set it.

We had one scenario wherein the back-end system was sending JSON data with a quite complex structure. NW gateway needed to expose the data into oData.

There were two options:

1. Break the JSON into different operations/entities using ABAP and link them in NW gateway project
2. Just pass the JSON to UI client side as a string and convert it into an JavaScript object

We had chosen the second option to avoid lots of ABAP work at NW gateway. NW gateway is not very friendly for complex or deep structured oData services.

Here I will explain the steps:

1. Expose a NW gateway oData that responds the JSON as a string
2. Make a oModel.read (HTTP GET) call to get the string at client side
3. Convert the JSON string to a JavaScript object
4. Convert the main JavaScript object to smaller objects as per your need
5. Create JSON Model and map it to your control

1. Expose a NW gateway oData that responds the JSON as a string

  2. Make a oModel.read (HTTP GET) call to get the string at client side

ui5.utils.getData = function(ojson){
  var sServiceUrl = "/sap/opu/odata/sap/ZGW_REST_SRV";    
// create OData model instance with service URL and JSON format
  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true );
  try {
   oAbort = oModel.read("/AGREEMENT('')",
                              undefined,
                              undefined,
                              false,
                              function _OnSuccess(oData, response) {
                                     window.ojson = oData;
                                 },
                              function _OnError(oError){                                
                                 }                             
         );
  }
   catch(ex) {
   alert(ex);
  }
}

Output:

3. Convert the JSON string to a JavaScript object

var vjson = JSON.parse(ojson.AGREEMENT_JSON);

4. Convert the JSON string to a JavaScript object

      loop through vjson object to create your own json objects. In this example I am directly using vjson to create the JSON model.

5. Create JSON Model and map it to your control

sap.ui.jsview("ui5.ui5", {
  getControllerName : function() {
  return "ui5.ui5";
  },
  createContent : function(oController) {
  var vjson = JSON.parse(ojson.AGREEMENT_JSON);
  var list = new sap.m.List("list", {
     headerText: "Quote List",
     growing: true,
     growingThreshold: 4,
     growingScrollToLoad: false
  })
  var oModel = new sap.ui.model.json.JSONModel(vjson.data);
  list.setModel(oModel);
  var StList = new sap.m.StandardListItem("StList", {
  title: "{id}",
  description: "{type}"
  });
  list.bindAggregation("items", "/",StList);
  return new sap.m.Page({
  title: "Quote",
  content: [ list ]
  });
  }
});

Output