Skip to Content
0

how to bind table created in xml view with data from a json file?

Oct 17, 2017 at 07:14 AM

51

avatar image

Hi,

I have a data.json file inside model folder like this:

[{ "date": "",

"from": "",

"to": "",

"hours":"",

"type":"",

"customer": "",

"project": "",

"description": "" }]

I am trying to load this into a json model like :

var oModel = new JSONModel("model/data.json");

var typ= this.getView().byId("ityp").getValue();

var hrs= this.getView().byId("ihrs").getValue();

oModel.setProperty("/type",typ);

oModel.setProperty("/hours",hrs);

and setting the path in xml table:

<Table id="tstable" items="model/data.json">

<columns>

.

.

<items>

<ColumnListItem>

<cells>

<ObjectIdentifier title="{hours}"/>

<ObjectIdentifier title="{type}"/>

.

.

but neither the JSON model is fetching any data from data.json nor the table is being populated.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Bilen Cekic Oct 17, 2017 at 08:37 AM
0

can you replace this line

var oModel = new JSONModel("model/data.json");

with this ?

var oModel = new JSONModel();
oModel.loadData("model/data.json")

it will load the json data.

Later on bind model to page,

this.getView().setModel(oModel);

and change your items binding to;

<Table id="tstable" items="{/}">
Show 7 Share
10 |10000 characters needed characters left characters exceeded

Thanks for the response!

I tried your recommendations and there is still no data. Please check the screenshots

0

please check these scr shots

scr2.png

scr3.jpg

scr2.png (103.5 kB)
scr3.jpg (155.8 kB)
0

your path is wrong probably

try ("webapp/model/data.json") instead ("model/data.json")

0

Thanks for the suggestion but I tried this earlier and it didn't work

("./model/data.json");

0

do like that;

open your page in chrome, open developer tools and put a breakpoint on loaddata line. on the console try alternates till you find the correct path :) you can bind during the debugging.

If still doesn't work; try writing your json to your model declaration. sample:

var oModel = new sap.ui.model.json.JSONModel(
[{ "date": "01.01.2017",
"from": "aaa",
"to": "sss",
"hours":"ddd",
"type":"aa",
"customer": "aa",
"project": "aa",
"description": "" }]
);

this.getView().setModel(oModel);
0

Thanks for the response! :)

Its working fine when declared and defined in controller- the json data but in that case the actual thing that I am trying to do is having another problem i.e. I need to take input through the input fields and populate those data into the table but while entering a new data the previous data in table is replaced rather than appended within a new row. I think this is happening because every time the function is called the json model is getting initialized but don't know how to avoid it.

I thought declaring and defining the json model out of the event function block would work and thats why I was trying to use that JSON file - data.json.

scr5.png

scr6.png

scr5.png (97.8 kB)
scr6.png (109.5 kB)
0

and appended:

scr7.png

scr8.png

scr7.png (136.0 kB)
scr8.png (112.3 kB)
0
Arjun Biswas Oct 19, 2017 at 03:27 AM
0

You can store your JSON in a variable, and for the JSON model, use the setData() method with the variable as the parameter.

Share
10 |10000 characters needed characters left characters exceeded