I would like to share how to load and consolidate JSON data (with the same structure) from OData services into one JSON model.
Let's assume you need to load the following OData services into one JSON model:
/sap/opu/odata/sap/ZGW_SRV/lpadSet?&$filter=ActivityGroup%20eq%20'" +menu[a]+ "'&$format=json"
Where menu[a] is a different source of OData service.
var oBundle = jQuery.sap.resources({url : "res/menu.properties"});
var menu = oBundle.getText("LOCAL_MENU").split(",");
Here is a sample of JSON data structure:
{
"d": {
"results": [
{
"__metadata": {
"id": "https://sapnetweaver.com:8200/sap/opu/odata/sap/ZGW_SRV/lpadSet('SAP_BW_GLB_FIN_MENU')",
"uri": "https://sapnetweaver.com:8200/sap/opu/odata/sap/ZGW_SRV/lpadSet('SAP_BW_GLB_FIN_MENU')",
"type": "ZGW_SRV.lpad"
},
"ActivityGroup": "SAP_BW_GLB_FIN_MENU",
"ParentId": "0000000011",
"ObjectId": "0000000002",
"NodeType": "F",
"Text": "Asset Accounting",
"PDFUrl": "",
"Menulevel": "02",
"Description": "",
"Url": ""
},
{
"__metadata": {
"id": "https://sapnetweaver.com:8200/sap/opu/odata/sap/ZGW_SRV/lpadSet('SAP_BW_GLB_SD_MENU')",
"uri": "https://sapnetweaver.com:8200/sap/opu/odata/sap/ZGW_SRV/lpadSet('SAP_BW_GLB_SD_MENU')",
"type": "ZGW_SRV.lpad"
},
"ActivityGroup": "SAP_BW_GLB_SD_MENU",
"ParentId": "0000000011",
"ObjectId": "0000000003",
"NodeType": "F",
"Text": "Accounts Payable",
"PDFUrl": "",
"Menulevel": "02",
"Description": "",
"Url": ""
}
]
}
}
Let's defining the necessary variables. Variable ml is the counter to indicate how many Ajax query we have perform. Variable outputdata is an array to store the result of OData query.
var outputdata = []; oModel = new sap.ui.model.json.JSONModel(); oModel.setSizeLimit(500); console.log(menu.length); var ml = 0; var rund = true;
Create a function timeout() to check if all Ajax queries have been completed. How do we know? by checking if the menu length is the same as the variable ml. Once it has been completed, put the outpdata into a JSON model and exit the loop.
function timeout() { function run() { if(menu.length==ml && rund == true){ rund = false; console.log("Done"); clearInterval(myVar); oModel.setData({ modelData:outputdata }); oController.getView().setBusy(false); console.log(oModel); } } var myVar = setInterval(run, 10); }
Set Busy dialog and run the timeout() function:
oController.getView().setBusy(true); timeout();
Perform a loop based on the total number of query in menu[a].
for (a in menu ) { $.when( $.get("/sap/opu/odata/sap/ZGW_SRV/lpadSet?&$filter=ActivityGroup%20eq%20'" + menu[a] + "'&$format=json") .success(function(data) { for (z=0; z<data.d.results.length; z++){ outputdata.push({ActivityGroup: data.d.results[z].ActivityGroup, Description: data.d.results[z].Description, Menulevel: data.d.results[z].Menulevel, NodeType: data.d.results[z].NodeType, ObjectId: data.d.results[z].ObjectId, PDFUrl: data.d.results[z].PDFUrl, ParentId: data.d.results[z].ParentId, Text: data.d.results[z].Text, Url: data.d.results[z].Url }); } ml = ml + 1; }) .error(function(jqXHR, textStatus, errorThrown) { }) ).fail(function() { ml = ml + 1; } ).done(function() { }); }
We perform the Ajax "Get" query. If is success, under success function we put the result in outputdata array and increase the counter of variable ml.
.success(function(data) { for (z=0; z<data.d.results.length; z++){ outputdata.push({ActivityGroup: data.d.results[z].ActivityGroup, Description: data.d.results[z].Description, Menulevel: data.d.results[z].Menulevel, NodeType: data.d.results[z].NodeType, ObjectId: data.d.results[z].ObjectId, PDFUrl: data.d.results[z].PDFUrl, ParentId: data.d.results[z].ParentId, Text: data.d.results[z].Text, Url: data.d.results[z].Url }); } ml = ml + 1; })
If fail to get the result, we also increase the counter of variable ml.
).fail(function() { ml = ml + 1; }
Let's test it out.
In the below example, the total number of query is 7. I have disabled 6 so only 1 is working. We managed to captured all the information and stored in JSON model: modelData.
That's it for now. Thanks for reading my blog and let me know if you have any comments.
). Please, we need something more complex/advanced than formatter function and this new baby-formatter (expression binding). Every week or so there is a question on the forum about calculated attributes:
). The last one sounds like a good alternative for sap.ui.ux3.NotificationBar which acts funny sometime when component is embedded in to Fiori launchpad.
).
