How to use a json object from a local file as a datamodel in openui5?

Question

I have a problem with the example https://github.com/SAP/openui5-masterdetail-app

I would like to use the two json files Objects.json and LineItems.json in the folder ’webapp/localService/mockdata’

I have a local installation (no WEB IDE). It works fine.

I have made following changes

webapp/manifest.json

...

"resources": "resources.json",
"dataSources": {
    "tableData_alias": {
        "uri": "localService/mockdata/Objects.json",
        "type": "JSON"
    }
}

...

"models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "sap.ui.demo.masterdetail.i18n.i18n"
        }
    },
    "tableData": {
        "type": "sap.ui.model.json.JSONModel",
        "dataSource": "tableData_alias",
        "preload": true
    }
},

webapp/view/Master.view.xml

...
items="{
        path: 'DataModel>/',
        sorter: {
            path: 'Name',
            descending: false
        },
        groupHeaderFactory: '.createGroupHeader'
    }"
...

webapp/controller/Master.controller.js

onInit : function () {
var dataModel = this.getOwnerComponent().getModel("tableData");
this.getView().setModel(dataModel, "DataModel");

// Control state model
var oList = this.byId("list"),
...

The file Objects.json will be loaded, but the master table is not rendered. (The 'detail' list is the next step for me later on...)

The json file

In the browser's console I get the following error : _Failed to load component for container container. Reason: TypeError: Unable to get property 'attachMetadataFailed' of undefined or null reference - _

Please help, what is not correct. (Maybe the whole example on github?)

Answer 1

In webapp/controller/Master.controller.js, please try doing it in onAfterRendering: function() and not onInit: function()

Thanks

Answer 2

Try this below solution. I don't see any code error, but you are setting a json model to your context view in your onInit function, which might be empty.

In your webapp/view/Master.view.xml, you can directly bind the aggregation item path, using the model you defined in your manifest.json

 ...
items="{
        path: 'tableData>/',
        sorter: {
            path: 'Name',
            descending: false
        },
        groupHeaderFactory: '.createGroupHeader'
    }"
...

Thanks.