Binding Sap Fiori JSON Model to Table

In the manifest.json file, I created a model under “models” for our example

"Student": {
"type": "sap.ui.model.json.JSONModel"
}

Then, I create a file named “student.json” in the “Model” folder. You can name it anything you want.

{ 
"Students": [{
"Class": "First Class",
"Lesson": "History",
"Credit": "6"

},
{
"Class": "Second Class",
"Lesson": "Lecturure",
"Credit": "4"
},
{
"Class": "Third Class",
"Lesson": "Lecturure",
"Credit": "4"
}

]

}

Then, in the main.controller.js file, I place my libraries under sap.ui.define

sap.ui.define([
"sap/ui/core/mvc/Controller",
'sap/ui/model/json/JSONModel'
],

Function part, I add the JSON model. Then, in the onInit part, after making the model component oModel for Student, I connect it to the JSON file I created in my project by using loadData(sap.ui.require.toUrl, adding “applicationnamespace/modulename” to the beginning, and specifying the JSON file path).

 function (Controller,JSONModel) {
"use strict";


return Controller.extend("json.json.controller.Main", {
onInit: function () {
var oModel = this.getOwnerComponent().getModel("Student");
                 oModel.loadData(sap.ui.require.toUrl("json/json/model/student.json"));



            }

        });
    });

If we don’t want to define it in the manifest.json, we can create a model named “Student” in the Controller.js file. However, if we do this, we won’t be able to see the models we used in the manifest.json. I just wanted to show it.

var oModel = new JSONModel(sap.ui.require.toUrl("json/json/model/student.json"));
this.getView().setModel(oModel , "Student");

Then, I create a table in my mainview.xml file and bind it to the model’s property name in the JSON file as “Model Name>/ Property Name in the JSON File”.

Then, I create columns and set the layout that will be displayed in the table.

Then, I create a cell in the ColumnList Item and insert text into it. I bind the objects in the JSON file to the text as “Model Name> Content in the JSON File”.

 <content>
<Table items="{Student>/Students}">
<columns>
<Column>
<Text text="Class" />
</Column>
<Column>
<Text text="Lesson" />
</Column>
<Column>
<Text text="Credit" />
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="{Student>Class}" />
<Text text="{Student>Lesson}" />
<Text text="{Student>Credit}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>

As you can see in my table, the data has been loaded successfully.

You can acces the code on this repo.

https://github.com/kaancancalkan/Medium-Blog/tree/main/Table%20JSON%20Exmaple/json