SAPUI5 : data from JSON not displayed in detail view page without errors in the developper tools - data-binding

Question

I'm trying to display the data of a JSON file into the detail view page. When I click on an item of the table, the details of this item should be displayed in the detail view page, but it don't. As I'm new to SAP UI 5, I don't understand what are the reasons for this mistake.
But in the developper tools, I can see the arrays of my data.
Can anyone explain me the cause of this error please ?
I searched for some solutions and this is what I did for the moment.
main.view.xml:
<Table id="tab1" items="{path: '/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">
<cells>
<Text text="{id}" />
<Text text="{description}" />
<Text text="{debutValidite}" />
<Text text="{finValidite}" />
<Text text="{prix}" />
</cells>
</ColumnListItem>
</Table>
main.controller.js:
onPress: function (oEvent) {
var oItem = oEvent.getSource();
console.log(oItem);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail", {
ID: oItem.getBindingContext().getProperty("id")
});
},
detail.view.xml:
<content>
<f:SimpleForm id="form1" editable="false" layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4"
columnsL="1" columnsM="1">
<f:content>
<Label text="ID"/>
<Text text="{id'}"/>
<Label text="Description"/>
<Text text="{description}"/>
<Label text="Date début de validité"/>
<Text text="{debutValidite}"/>
<Label text="Date fin de validite"/>
<Text text="{finValidite}"/>
<Label text="Montant"/>
<Text text="{prix}"/>
</f:content>
</f:SimpleForm>
</content>
detail.controller.js:
onInit: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
var sObjectPath = "/Articles/"+oEvent.getParameter("arguments").ID;
this._bindView(sObjectPath);
console.log(sObjectPath);
},
_bindView: function (sObjectPath) {
var oView = this.getView();
oView.bindElement(sObjectPath);
console.log(oView.bindElement(sObjectPath));
},
onBack: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("main");
}
In the Component.js file :
var oModel = new JSONModel();
oModel.loadData("./model/Articles.json");
this.setModel(oModel);
In the manifest.json file:
"routes": [{
"name": "main",
"pattern": "",
"target": "main"
}, {
"name": "detail",
"pattern": "detail/{ID}",
"target": "detail"
}],
"targets": {
"main": {
"viewName": "main",
"viewLevel": 1
},
"detail": {
"viewName": "detail",
"viewLevel": 2
}
}
Articles.json:
{
"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"
}
]
}
developper_tools_1.png
developper_tools_2.png
main_view.png
detail_view.png

Answer 1

In your Detail.view.xml, could you try to remove the single quote in your text element ?
<Label text="ID"/>
<Text text="{id'}"/>
{id'} => {id}
<Label text="ID"/>
<Text text="{id}"/>
Check if it works now.