Table not displaying the Data

Question

Here i am using the table to display data from OData service. Rather displaying the data i could see blank but nothing, which means it says values are available. But it is not able to navigate to the path or display the values.

view.xml

<Table id="BoM" headerText="BOM Details"  class="sapUiResponsiveMargin" width="auto"
            items="{path : 'oModelBoM>/'
            }">

    <columns>
  <Column>
    <Label text="Material" />
  </Column>
  <Column>
    <Label text="Component" />
  </Column>
   <Column>
    <Label text="Brand" />
  </Column>
</columns>
<items>
  <ColumnListItem>
    <cells>
 <Text  text="{oModelBoM>Material}" />
 <Text text="{oModelBoM>Component}" />
 <Text text="{oModelBoM>Brand}" />
    </cells>
  </ColumnListItem>
</items>

</Table>

odata.js

getProductBoM : function(iNumber){
        var sNumber = iNumber.toString();
        while (sNumber.length < 18) {
            sNumber = "0" + sNumber
        }

        var vUriRead = "/ProductHeadSet('12345')/ProductHead2BOM/
        var oResult;

        this.initODataModel( );

        this.oDataModel.read(vUriRead, null, null, false, function(oData, oResponse) {
            oResult = oData;
        }, function(oError) {
              jQuery.sap.log.error("OData-Error in function getProductBoM (EntityProductHead2BOM)");
              xyz_homepage.xyz_homepage.src.odata.displayRequestFailedMessage(oError);
        });

    return oResult;
}

controller.js

onInit : function() {

    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.attachRouteMatched(this.handleRouteMatched, this);


    this.oModelBoM = new sap.ui.model.json.JSONModel();

    this.getView().setModel(this.oModelBoM, "oModelBoM");

},

handleRouteMatched : function(oEvent) {
    if (oEvent.getParameter("name") === "ListDetailView") {
        var iNumber = oEvent.getParameter("arguments").number;


        //Call bom routine and set data

        var oBoM = xyz_homepage.xyz_homepage.src.odata.getProductBoM(iNumber);

        this.oModelBoM.setData(oBoM);

So the Uri tries to navigate to the path BOM but it is not happening, with the reference of the "12345" matching BOM should be displayed. Here i am using static reference as "12345", adding to same point could it be dynamic.

EDIT :

I get blank table but when i debug, the array is passing the value. Please find the screen shot below, but the values are not displaying on the table.

Thanks and Appreciated !!!

enter image description here

I am getting the array values. which are 2 at the moment. So i could able to see the both the arrays. — Rocket

Marc Marc · Accepted Answer · 2018-11-27T08:59:03

First of all I am surprised that your getProductBoM function works. You are returning a variable oResult. The value of that variable is set in a callback, so in most cases AFTER it is returned.

It seems like you set the async parameter of the read function to false? Consider switching to Promises. Sync calls are deprecated (by browsers!).

Second, your model has the following structure:

{
    "__metadata": {
        ...
    },
    "results": [
        { ... },
        { ... }
    ]
}

So I would change the line where you set the data to this.oModelBoM.setData(oBoM.results);

Table not displaying the Data

2 Answers