Use Local JSON File for Databinding in SAPUI5

Question

I have a little Problem with SAPUI5. I have the following Code:

var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("JSON/saplogon.json");


    var oTable = new sap.ui.table.Table({
        visibleRowCount: 30,
        firstVisibleRow: 0
    });


    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Server"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "Server"),
        width: "40%"
    }));


    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Beschreibung"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "Description"),
        width: "40%"
    }));

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "Adresse"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "Address"),
        width: "10%"
    }));

    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({text: "SystemID"}),
        template: new sap.ui.commons.TextView().bindProperty("text", "mssysname"),
        width: "10%"
    }));


    oTable.setModel(oModel);
    oTable.bindRows({
        path: "/Systeme",
        filter: allFilter
    });     

    oPage_Results.addContent(oTable);

the Code above works but when I change the directory of the .JSON File to a Directory on my Server it wont work, I have also tried to get the data from another Server with JSONP but that also wont work, can anybody please help me to find a way for consuming a local JSON file from my server which is not in my package.

Thank you very much guys

You should check the url of the request that tries to load the json-file. For example a tomcat on my machine searches the file file at `http://localhost:8080/project/JSON/saplogon.json` — herrlock, Feb 12 '15 at 13:39

score 2 · Answer 1 · answered Jul 22 '16 at 06:41

Better way of loading the JSON file in UI5

var oModel = new JSONModel()
oModel.loadData(pathToTheJSONFile);
oModel.attachRequestCompleted(function(oEventModel){
    //console.log(oModel.getData());
    //This is called after data is loading
});
oTable.setModel(oModel);

i feel this is better way.

score 0 · Accepted Answer · answered Feb 12 '15 at 20:00

0

Try to Ajax the file, after defining the table and its columns:

var sServiceUrl = 'yourServerOrNetworkPathInclJson';
var post = $.ajax({
            url : sServiceUrl,
            type : "GET"
        });

post.done(function(data) {

    var oModel = new sap.ui.model.json.JSONModel();
    console.log(data); // check binding path
    oModel.setData(data);

    oTable.setModel(oModel);
    oTable.bindRows({
        path : "/", // might also be "/d/results" or whatever
    });
}

answered Feb 12 '15 at 20:00

dotchuZ

2,621
11
39
65

When i try it with your code snippet it tells me that Cross-Origin-Requests are blocked, but both scripts are hosted on the same server under the same domain. – nestario Feb 13 '15 at 09:47
hm I think this is also the reason why using loadData does not work, why dont you put the json locally into any eclipse folder? and then something like /json/yourfile.json would be the path ... – dotchuZ Feb 14 '15 at 10:48
The problem is, the file is changing every week and is generated by an Abap Report so i would have download the file and upload it through my IDE and that would be not very clever – nestario Feb 18 '15 at 10:44
you dont have a SAP Netweaver Gateway right? loadData needs an gateway service method - why dont you pull the json via javascript? method woudl be load() ... or check this http://stackoverflow.com/questions/14478985/jquery-ajax-loads-jsonp-from-localhost-but-doesnt-return-data or that http://stackoverflow.com/questions/7346563/loading-local-json-file – dotchuZ Feb 18 '15 at 14:47

score 0 · Answer 3 · answered Mar 16 '15 at 08:31

Finally it worked now, i just installed an IIS7 Webserver on the server of my SAP ERP System and hosted my file over the IIS7. I didnt needed to use an AJAX request or something the normal load model method of the SAPUI5 library worked. Thanks for your help mates.

Use Local JSON File for Databinding in SAPUI5

3 Answers3