setJSON，setData和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

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 2

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.

eg

 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.

eg 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.

ie Same as Set Data but strict JSON

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