Skip to Content

Playing with the model on SAP UI5

The model is the most import component in SAP UI5 application. The purpose of this post is to show you how to use it in different manner.

Playing with Path

All example are based on this data source structure

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}

How to retrieve data from the model?

First, you have to find the model instance, then call the following method:

getProperty(sPath, oContext?)

sPath is important here, because it will indicate the wanted value.

Example 1: Get the value of value attribute

// Accès direct
Var oData = oModel.getProperty(« /menu/value ») ;
// Accès déroutée
Var oData = oModel.getProperty(“/menu”);

Example 2: Get the onClick value from the second line

// Accès direct
Var oData = oModel.getProperty(« /menu/popup/menuitem/1/onclick ») ;
// Accès dérouté
Var oData = oModel.getProperty(“/menu”);

How to write data into the model?

Example 3: Change the id value attribute

oModel.setProperty(« /menu/value », newValue);

How to loop inside a node?

Example 4: Loop inside menuitem node

var oData = oModel.getProperty(“/menu/popup/menuitem”);
If (oData instanceof Array){
  oData.foreach( function(oValue, i){


Hope you will find those tips interesting.

Enjoy 😉

You must be Logged on to comment or reply to a post.
    • Check your path. Is it correct? Try to debug in Google Chrome console: get all content of your oData like this:




      Maybe your oData is empty?

      • Seems it’s not intended to be used in index.html …

        here is the example, json taken from the original post:

                        var jsonModel = new sap.ui.model.json.JSONModel (“data.json”, “”, false);    
                        alert( ‘test ‘);

                        var title = jsonModel.getProperty(“/menu/id”);   

        If I remove “alert(‘test’)” – title is “undefined”, if it’s there, everything is ok.

        I’ve tried to hook up on events of jsonmodel, but it doesn’t help either.

        • Your example is not correct. I understand you are trying to get json data from file “data.json”. But there are no method to load data to json model.

          For example, data loaded to jsonModel from string by method setJSON:

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

          jsonModel.setJSON(‘{“menu”: {“id”: “id1″,”ad”: “ad1″,”bd”: “bd1”}}’);

          var title = jsonModel.getProperty(“/menu/id”);


          You can load data from file by method loadData.

          Usefull information about json model and json methods is here.

          • Solved:

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

            jsonModel.loadData(“data.json”, “”, false);

            I’m using api 1.17, and seems it’s not yet stable enougth. In embedded doc there are params similar to loaddata in constructor, but seems they aren’t working as expected. Still thanks for giving an idea.

  • Hi,

    Can we read oData Model in the similar way as done here for JSON Model ?

    I tried reading it but it returns undefined. Following is my code:

    var oModelChart = new sap.ui.model.odata.ODataModel(““,true,”uid”,”pwd“);





    Can any one help ?

    • Hi,

      Try using read() function from model:

              var oModel = sap.ui.getCore().getModel();

              var oProp =“/MyCollection/0/Dept_ID“, null, null, true, function(oData, oResponse){




      • Hi Joseph,

        I tried the above method, i am able to see the data, thing is how do i set the data to the model as i see setData property of odata model is deprecated. Below is the code for your reference. Thanks in advance.


        var oModel = new sap.ui.model.odata.ODataModel(“proxy/http/”, true);


“/People”, null, null, true,

          function(value, response){

          //oModel.setProperty(“People” ,JSON.parse(response.body)); 










    • Hello,

      To delete an array from model  do the following :

      1/ Read the property wich contains the array

         e.g. var oProp = oModel.getProperty(“/”);

      2/ Then delete the array

        e.g. oProp[“myArray”] = [];

      3/ Set the property

        e.g. oModel.setProperty(“/”, oProp);

      It should work.


    • Hello,

      I guess you are talking about a Menu control (sap.ui.commons.Menu) in wich is binded to a Model.

      If it is true, then, you have to do the following :

      1/ Read the property wich contains the menuitems array

         e.g. var oProp = oModel.getProperty(“/”);

      2/ Push new item to the array

        e.g. oProp[“myItemsArray”].push({“text” : “blabla”, “icon”: “”images/new.gif”});

      3/ Set the property

        e.g. oModel.setProperty(“/”, oProp);


          • Joseph,

            I am trying out code like this

            var data=”{‘menu’: {“;

              data += “‘id’: ‘file’,”;

              data += “‘value’: ‘File’,”;

              data += “‘popup’: {“;

              data +=     “‘menuitem’: [“;

              data += “{‘value’: ‘New’, ‘onclick’: ‘CreateNewDoc()’},”;

              data += “{‘value’: ‘Open’, ‘onclick’: ‘OpenDoc()’},”;

              data += “{‘value’: ‘Close’, ‘onclick’: ‘CloseDoc()’}”;

              data += ”    ] “;

              data += ”     }”;

              data +=    ”  }}  “;

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


            But I am getting undefined is there anything wrong with what I do?

          • Hi sagar,

            It seems your JSON is malformerd.

            It should look like




                           {“RESULT”:{“TGROUP”:”0003″,”TGROUP_TXT”:”Starters/pas afgestudeerden”}},







                           {“RESULT”:{“TGROUP”:”0010″,”TGROUP_TXT”:”Maatschappelijk werk”}},

                           {“RESULT”:{“TGROUP”:”0011″,”TGROUP_TXT”:”Hoger onderwijs”}},

                           {“RESULT”:{“TGROUP”:”0012″,”TGROUP_TXT”:”Kleuter/lager onderwijs”}},

                           {“RESULT”:{“TGROUP”:”0013″,”TGROUP_TXT”:”Shared Service”}}]}


            while concatenating strings you should use (Double Quotes) instead of (Single Quote )

            Please check the links below.

            jQuery.parseJSON() | jQuery API Documentation


            SAPUI5 with JSON or XML Data.

            Hope it will help. 🙂

          • Hi sagar,

            Try this.

            var data =   ‘{‘;

              data +=  ‘”menu”: {‘;

              data += ‘”id”: “CC167”,’;

              data += ‘”value”: “CC167”,’;

              data += ‘”popup”: {‘;

              data +=   ‘”menuitem”: [{‘;

              data +=     ‘”value”: “new”,’;

              data +=     ‘”onclick”: “Beginning XNA”‘;

              data +=    ‘},’;

              data +=    ‘{‘;

              data +=    ‘”value”: “new”,’;

              data +=    ‘”onclick”: “Beginning XNA 20l”‘;

              data +=    ‘}]}}}’;

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

            var data1 = jQuery.parseJSON(data);



            Happy Learning 🙂

          • Hello,

            In fact, Krishnakant Joshi is right.

            If you want to construct a JSon with Javascript the easiest way is :

            var myJSon = { “Attr1” : “Value”, “myArra” : [ { “Attr1” : “value” }, { “Attr2” : “value” }]};

            Here value can be the content of any variable.


  • hi, I need to populate data in a table, later, complete and modify that data, and later save all data.

    here’s the code:


      populateData: function(oSHTable){

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

      aData = [

              {material: “Material 1”, cantUme: “10”, ok: false, fechaProd: “”, destino: “”},

              {material: “Material 2”, cantUme: “20”, ok: true, fechaProd: “”, destino: “”},

              {material: “Material 3”, cantUme: “50”, ok: false, fechaProd: “”, destino: “”},

              {material: “Material 4”, cantUme: “65”, ok: true, fechaProd: “”, destino: “”}


      oModel.setData({modelData: aData});




      save: function (){“/modelData”));

      //I need to iterate “modelData” and obtain each values for “material”, “cantUme”, “fechaProd” an so on

      for(var i=0; i<sap.ui.getCore().getModel().getProperty(“/modelData”).length; i++){

      //clearly, it doesn’t work“material ” + [i] + ” ” + sap.ui.getCore().getModel(“/modelData/material”));

      // how can I get materials values???



      onInit: function(){



    material 0 undefined

    material 1 undefined

    material 2 undefined

    material 3 undefined