Not able to bind JSON model to table - Cannot read property 'setModel' of undefined

[former_member601407]

Hi,

Structure of my app:

Empty table with button at header which will open a dialog of simpleForm to fill student details and one click "Add", the input field entries has to be added in table.

Two fragments using. One is for table (imported the fragment in view) and another is for dialog (loaded the dialog fragment in controller file).

Dialog.fragment.xml:

<beginButton>
  <Button text="Add" type="Emphasized" press="onDialogAddRecord"/>
</beginButton>

Home.controller.js:

sap.ui.define(["sap/ui/model/json/JSONModel", func...
 
onDialogAddRecord: function (oEvent) {
   var Dfname = sap.ui.getCore().byId("inputFirstName").getValue();
   var Dmobno = sap.ui.getCore().byId("inputMobileNo").getValue();

   var oTable = sap.ui.getCore().byId("table");
   var studModel = new JSONModel();
   var studData = {
    fname: Dfname,
    mobile: Dmobno,
  };
 // set the data to JSON model and assigned path name
 studModel.setData({"students":studData});
 // binding model to table
 oTable.setModel(studModel);
 // closing the dialog
 this.oDialog.close();
} 

Table.fragment.xml:

 <Table id="table" items="{/students}">
   <columns>
     <Column>
       <Label text="Name"/>
     </Column>
     <Column>
       <Label text="Contact Number"/>
     </Column>
   </columns>
   <items>
     <ColumnListItem >
       <cells>
         <Text text="{fname}"/>
         <Text text="{mobile}"/>
       </cells>
     </ColumnListItem>
   </items>
 </Table> 

After adding details, when i click ADD, i am getting an error as setModel is undefined. Attached the error screenshot below for your reference.

[Joseph_BERTHE · Accepted solution]

Hello,

In your definition, the students is not an array. You probably should do this :

{
   Students : [{
Flame: "",
Mobile: ""
}]
}

Regards,

Joseph

[former_member601407 · Accepted solution]

Hi Joseph,

I did like this, but still "Cannot read property 'setModel' of undefined"

var studData = [{
   fname: Dfname,
   mobile: Dmobno
  }
];

[Joseph_BERTHE · Accepted solution]

What about the oTable variable ? Is it undefined or is it an object?

If it is undefined then the system cannot find your control.

If I were you, I will use binding unless trying getting value by the ID control. And for the model I will use a global one for your dialog only.

Regards

[former_member601407 · Accepted solution]

As you said, the issue was in the oTable variable which was undefined. I used sap.ui.getCore() to fetch the ID instead of this.byId. Now the error is gone.

[prashil]

Hi Subin,

Please avoid using sap.ui.getCore().byId() method to get the control from the view as a best pratice. The Id assigned to the view will be different at runtime.

Instead use this.getView().byId(), this will make sure you get the design time id and I think this will also resolve your issue.

Thanks

Prashil

[former_member601407]

Thanks. Noted