What is the difference between setJSON, setData and loadData?

Question

This is regarding the mentioned methods of sap.ui.model.json.JSONModel in SAPUI5:

• setJSON
• setData
• loadData

What is the difference between these 3 methods? When do we use these methods and can we use more than 1 of them for the same purpose?

Answer 1

Have a look at the well documented API Reference for JSONModel.

In summary (from SAP Documentation):

setData: Sets the data, passed as a JS object tree, to the model.

e.g

var data = {
  "ProductCollection": [{
    "titleId": 0,
    "Name": "Olayinka O",
    "ProductId": "001",
    "chartValue": 75,
    "ProductPicUrl": "sap-icon://competitor"
  }]
};


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

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


/*setdata, could also be a odata url in json format*/

loadData: Load JSON-encoded data from the server using a GET HTTP request and store the resulting JSON data in the model. Note: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy, the request can not successfully retrieve data from a different domain, subdomain, or protocol.

e.g. you can use this to load/GET changes to the data/model and automatically updates the view if that specific model has being binded by reloading the url. If you use load, you don't need the other two in my opinion and loadData with not work on local json data.

var sURL = "https://cors-anywhere.herokuapp.com/https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json";
var oModel = new sap.ui.model.json.JSONModel();

//if called in setInterval, all changes in the backend will be updated in the view if binded in this case every second

setInterval(oModel.loadData(sURL, true), 1000);

setJSON : Sets the data, passed as a string in JSON format, to the model.

i.e. Same as Set Data but strict JSON

Answer 2

setData

You have a JavaScript object and want to use this data as your model

const oJSONData = {
    data: {
        id: 4,
        first_name: "Eve",
        last_name: "Holt",
        avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
    }
};
oJSONModel.setData(oData);

---

setJSON

You have a String that when parsed represents a JavaScript object and want to use this data as your model

const sJSONData = '{"data":{"id":4,"first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"}}';
oJSONModel.setJSON(sJSONData);

---

loadData

You want to access a remote API which returns data as JSON and want to use this data as your model

const sURL = "https://reqres.in/api/users/4";
oJSONModel.loadData(sURL);

Answer 3

Luckily, the source code of UI5 is quite readable and often the better documentation than most of the API descriptions. Here is what each one of the APIs does basically:

setJSON

"Parse the JSON text and call setData"

JSONModel.prototype.setJSON = function(sJSON, bMerge) {
    var oJSONData;
    try {
        oJSONData = jQuery.parseJSON(sJSON);
        this.setData(oJSONData, bMerge);
    } catch (e) {
        // ...
    }
};

^Source

setData

"Store the data and notify all dependent bindings (checkUpdate)"

JSONModel.prototype.setData = function(oData/*plain JS object*/, bMerge){
    if (bMerge) {
        this.oData = /* merge with existing data */;
    } else {
        this.oData = oData;
    } // ...
    this.checkUpdate(); // notifies dependent bindings
};

^Source

loadData

"Load data from the given remote URL and call setData" --> Please check the source here.

---

In short, they all call setData at some point.

Which API to call in which situation depends on in which format you have the data available.

• The data are in JSON text --> setJSON
• The data are somewhere else --> loadData
• I already have the data in JS object / array ---> setData