setJSON、setData 和 loadData 有什么区别？

Question

这是关于 SAPUI5 中提到的 sap.ui.model.json.JSONModel 方法：

• setJSON
• setData
• loadData

这3种方法有什么区别？我们什么时候使用这些方法，我们可以为同一目的使用其中的一种以上吗？

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

查看 API Reference JSONModel.

的详细记录

总结（来自 SAP 文档）：

setData：设置数据，作为JS对象树传递给模型。

例如

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: 使用 GET HTTP 请求从服务器加载 JSON 编码的数据，并将生成的 JSON 数据存储在模型中。注意：由于浏览器安全限制，大多数"Ajax"请求都遵循同源策略，请求无法从不同域、子域或协议成功检索数据。

例如您可以使用它来 load/GET 更改 data/model 并自动更新视图（如果该特定模型已通过重新加载 url 绑定）。 如果您使用加载，我认为您不需要其他两个，并且 loadData 不适用于本地 json 数据。

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 : 设置数据，以 JSON 格式的字符串传递给模型。

即与设置数据相同，但严格 JSON

Answer 3

幸运的是，UI5 的源代码可读性很强，而且通常是比大多数 API 描述更好的文档。以下是每个 API 的基本作用：

设置JSON

"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

设置数据

"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

加载数据

"Load data from the given remote URL and call setData" --> 请检查 source here.

---

简而言之，他们都会在某个时候调用setData。

在哪种情况下调用哪种 API 取决于您拥有哪种格式的可用数据。

• 数据在JSON文本中 --> setJSON
• 数据在别处 --> loadData
• 我已经在 J​​S 对象/数组中有了数据 ---> setData