UI5 Loading json file

[gary_king2]

I am attempting to load a structured json file (entity model) and then bind it to a view. Also have other views use part of that json object (entity set) as well, but that's getting ahead of myself as I can't even get a simply json structure loaded yet. I'm using Eclipse as an editor, if that matters, with my json file being in the webContent directory, and my controller being in webContent/controller directory. We have tabLayout set in the index.html to point to the webContent directory.

I simply can not get my json file to load, here's a section of my controller code:

 .....
var TableController = Controller.extend("tabLayout.controller.testcontroller", {

onInit: function () { 
var oMydata = new sap.ui.model.json.JSONModel(); 
oMydata.loadData("tabLayout/Mydata.json"); 
console.log(JSON.stringify(oMydata.getData()));
....

When viewing in debug via chrome the odata section for oMydata shows no data.

I have also tried:

oReturns.loadData("Mydata.json");
oReturns.loadData("/Mydata.json");
oReturns.loadData("./tabLayout/Mydata.json");

but with no joy.

If I manually declare it in the console it's working, using setData.

My json file is in the format:

{ 
  "oMydata": { 
		[   
			{ "field1": "xyz",   
		  	  "field2": "abc"  
			}  
		]  
	     }
}

If anyone can see the obvious then do please let me know.

I get no error, that I can see when using loadData. Is there a good way of trapping whether an error has occurred and displaying it?.

[junwu · Accepted solution]

oMydata.loadData("tabLayout/Mydata.json",false);

file loading is aysnc. that's why you cannot get the data immediately after the data load call.

you can make it as sync, you can supply second parameter value false; make sure have the right path to the file.

[vidyadharsp · Accepted solution]

can you please tell me how to make it async to sync

[pragnesh_parmar]

json file loading is very easy to load json file in sapui5 application but you are not able update the json file in sapui5

[archisman92]

loadData returns a Promise which means you have to either catch the "resolve" event or "await" for the promise to get resolved. Follow the below code sample: .....

var TableController = Controller.extend("tabLayout.controller.testcontroller", {

onInit:async function () { 
var oMydata = new sap.ui.model.json.JSONModel(); 
await oMydata.loadData("tabLayout/Mydata.json"); 
console.log(JSON.stringify(oMydata.getData()));
....

[karthikarjun]

It is working as expected, please have a look on the below url.

http://plnkr.co/edit/be7JBFq8aPduun04PdHO?p=preview

Regards,

Karthik A

[gary_king2]

That Plunker link uses setData and NOT loadData. I thought I should mention that, but thanks all the same.

[former_member365727]

Check your network tab in Chrome to see if there is any request sent for JSON file

I think the issue is related to path where JSON file is stored...can you show the screenshot of project structure..

Alternatively you can instantiate JSON models directly from manifest.json (suggested way)