Local JSON Data File binding issue

[bpawanchand]

Hi Experts,

I am finding hard to define binding between the UI elements defined in the VIEW.JS by referring them in the CONTROLLER.JS. Here are some of the positive points which I could find from experts suggestions and recommendation and redefined my application in order to pull the JSON data into client.

1. I have imported an explicit JSON Data file with name ProductCategory.json. It is an array of 6 products.

2. By using loadData("","",false); I was able to load the data into the application synchronously. I could even see the same while debugging under network section.

3. Next to this I used getJSON()method to read the JSON data file into a dummy variable.Latter, the same dummy variable is used in model.setData({modelData: <dummyVAR>});

4. Now I got the reference of the table  by using sap.ui.getCore().byID("tabid"); within the controller. Next to this, I tried to set the model of the table and then finally used bindRows("/modelData"); to complete the binding definition.

Now , I was expecting to see the list of  6 rows in the table. But, its not happening. Now I am little confused about  where to define binding. Should it be defined in controller.js or within view.js?

Finally, this is the that way how I defined a column and its associated binding. in the view as follows

The Controller definition is as follows:

The output of the application

Regards

Pavan

[Qualiture · Accepted solution]

Hi,

Have you checked whether your returned model actually does contain any data?

[bpawanchand · Accepted solution]

Hi Robin,

Yes, I could see in the debug mode. the oPcmodel property oData; is filled with 6 array objects.

Please find the screen shot .

Regards

Pavan

[jmoors · Accepted solution]

Looking at the last screenshot, this issue is with you binding path.

You need to bind the table items to an array, however the JSON is actually an object containing a PRDCATS name/value array.

Therefore you need to bind to

oTab.bindRows("/PRDCATS");

Regards,

Jason

[jmoors · Accepted solution]

Also the getJSON and setData steps in your code are redundant, the loaddata method will populate the model data.

Regards,

Jason

[Former Member]

var e_model=sap.ui.model.json.JSONModel(file address);

now give a name to your model

        sap.ui.getCore().setModel(e_model,"emodel");

         otab.bindRows(/emodel);

        sap.ui.getCore().getModel("emodel").setData(e_model.getData());

Hope this will help you.

Regards

Umesh Singhal

[Former Member]

Pavan,

you can try this

new sap.ui.commons.TextView().bindProperty("text", "CategoryName")

and

oTab.bindRows({

path:"/modelData"

})

[Former Member]

Hi Pavan,

               Please Refer this link for data binding.

Regards

Moulika

[bpawanchand]

Hi Moulika,

Thanks for pointing me to binding section of SDK documentation. I tried  all these options. But some how I feel there is some discrepancy in the way I defined columns in the view or referencing the table in the controller.

Above is the JSON data file.

Before going forward just wanted to know is the file defined correctly?

Regards

Pavan

Message was edited by: Pavan Bhamidipati

Message was edited by: Pavan Bhamidipati

[Former Member]

Hi Pavan,

               For checking you JSON data is in json format or not please paste your code in jsonlint.com

and check whether u having a valid json or not. Later please bind the CategoryName also using {}.

i.e,

var oControl = new sap.ui.commons.TextView({text:"{CategoryName}"});

Regards

Moulika

[bpawanchand]

Hi Moulika,

Indeed that was a good link to validate the JSON file. It clearly says that it is a valid  JSON file. I tired you suggestion and modified the binding definition in the view file.

But no luck

Regards

Pavan

[Former Member]

Hi Pavan,

               BindProperty itself binds the data no need to place the property in {} again. You have to use either {} or bindProperty() method for that.

Regards

Moulika

[bpawanchand]

Hi Moulika,

However, I think we have to pass the name of the property i.e. the first parameter of the method is ID of the property and the second parameter would be the value that we are looking to store within the control.

So you mean to say that I should define something like below:

template: new sap.ui.commons.TextView().bindProperty("text",  "PRDCAT/Category")

I have included the source code as attachment. Can you please check if everything is in place

Regards

Pavan

Message was edited by: Pavan Bhamidipati

Controller.js.txt.zip

PC_Data_JSON.txt.zip

View.js.txt.zip