SAP UI5 : binding JSON model data to detail view

Question

I'm trying to display the data of a JSON file into the detail view file. As I'm new to SAP UI 5, I don't understand why I get the error : "oModel.createKey is not a function" in the console.

Can anyone explain me the cause of this error please ?

I searched for some solutions and this is what I did for the moment.

Here is the main.view.xml file :

                    <Table id="tab1" items="{path: 'articles>/Articles'}">
                        <columns>
                            <Column width="11rem">
                                <Label text="ID" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Description" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Date début de validité" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Date fin de validité" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Montant" />
                            </Column>
                        </columns>
                        <ColumnListItem press=".onPress" type="Navigation">
                            <Text text="{articles>id}" />
                            <Text text="{articles>description}" />
                            <Text text="{articles>debutValidite}" />
                            <Text text="{articles>finValidite}" />
                            <Text text="{articles>prix}" />
                        </ColumnListItem>
                    </Table>

The main.controller.js file :

    onInit: function () {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("./model/Articles.json");
        this.getView().setModel(oModel,"articles");
    },
    
    onPress: function(oEvent){
        var oItem = oEvent.getSource();
        var oContext = oItem.getBindingContext("articles");
        var sKeyId = oContext.getObject("id");
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("detail", {articleId: sKeyId});

The detail.view.xml file :

                    <f:SimpleForm id="form1">
                        <!--<f:content>-->
                            <Label text="ID"/>
                            <Text text="{articles>id'}"/>
                            <Label text="Description"/>
                            <Text text="{articles>description}"/>
                            <Label text="Date début de validité"/>
                            <Text text="{articles>debutValidite}"/>
                            <Label text="Date fin de validite"/>
                            <Text text="{articles>finValidite}"/>
                            <Label text="Montant"/>
                            <Text text="{articles>prix}"/>
                        <!--</f:content>-->
                    </f:SimpleForm>

The detail.controller.js file :

onInit: function () {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);

    },
_onObjectMatched: function (oEvent){
        
        var oModel = this.getView("detail").getModel("articles");
        console.log(oModel);
        var that= this;
        
        var sKeyId = oEvent.getParameter("arguments").articleId;
        console.log(sKeyId);

        oModel.dataLoaded().then(function(){
            var sPath = oModel.createKey("/Articles", {
                id: sKeyId  
            });
            that.getView().bindElement({ path: sPath});
        });
},
        


    onBack: function () {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("main");
    }

The Articles.json file :

{
"Articles": [{
        "id": "AR00000111",
        "description": "Pièce de rechange",
        "debutValidite": "01.02.2020",
        "finValidite": "01.05.2021",
        "prix": "150"
    }, {
        "id": "AR00000112",
        "description": "Chaise",
        "debutValidite": "01.03.2020",
        "finValidite": "01.05.2021",
        "prix": "200"
    }, {
        "id": "AR00000113",
        "description": "Pièce de rechange",
        "debutValidite": "01.02.2020",
        "finValidite": "01.09.2021",
        "prix": "250"
    }

]

}

And the manifest file :

    "sap.ui5": {
    
    ...
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "demo.testdemo.i18n.i18n"
            }
        },
        "articles": {
            "preload": true,
            "type": "sap.ui.model.json.JSONModel",
            "uri": "model/Articles.json"
        }
        ...
        "routes": [{
            "name": "main",
            "pattern": "",
            "target": ["main"]
        }, {
            "name": "detail",
            "pattern": "detail/{articleId}",
            "target": ["detail"]
        }],
        "targets": {
            "main": {
                "viewName": "main"
            },
            "detail": {
                "viewName": "detail"
            }
        }

Here is the detail.view.xml : https://i.sstatic.net/dvPbL.png

And the main.view.xml : https://i.sstatic.net/0A5tf.png

Answer 1

As I understand it your model is a JSONModel. JSONModels do not have the method createKey. This method only exists in the class ODataModel.

Instead you have to work with the JSON structure. So if you have an array you have to use the indices.

const iIndex = oModel.getProperty("/Articles").findIndex(article => article.id === sKeyId);
const sPath = `/Articles/${iIndex}`;