Displaying data from JSON in SAP UI5

Question

I am taking the Order no as input from user. Using this no I want to search in JSON and then display all the related data in the input texts. [SAP UI5]. I do not understand how I can query on json and pull the data for rest fields. I tried looking up on blogs for binding. But I am missing some concept. Could you please help me in understanding how to do it. Please review the below code. XML view, Data , Controller

testingagain.xml

<Panel visible="true" expandable="false" headerText="Order_Info" expanded="false" width="auto" class="sapUiResponsiveMargin P2">
  <content>
    <VBox alignItems="Baseline">
      <HBox alignItems="Center">
        <items>
          <Label text="Enter Order Number" labelFor="OrderNo" width="200px" />
          <Input id="OrderNo" width="200px" />
          <Button text="Submit" type="Accept" press="onSubmit" />
          <Label text="Order Number" labelFor="OrderNo" width="200px" />
          <Input id="showOrderNo" value="{OrderNo}" width="200px" />
          <Label text="AccountNo" width="200px" />
          <Input id="showAccNo" value="{AccountNo}" width="200px" editable="false" />
          <Label text="Date of Purchase" width="200px" />
          <Input id="showDate" value="{Date}" width="200px" editable="false" />
          <Label text="Requested For" labelFor="searchField" textAlign="Begin" width="100px" />
          <Input id="showRequestedFor1" value="{RequestedFor}" width="300px" textAlign="Center"></Input>
        </items>
      </HBox>
    </VBox>
  </content>
</Panel>

Data.json

    "OrderCollection" :[

            {
                "OrderNo" :"12345",
                "RequestedFor" :"Arati",
                "AccountNo" : "234556777",
                "Date" : "Nov 19,2017",
                "CC": "123345567889990985444",
                "ReleaseNo" :"1232344"

            },

            {
                "OrderNo" :"888888",
                "RequestedFor" :"Arati Order 2",
                "AccountNo" : "00000000",
                "Date" : "Jun 21, 2017",
                "CC": "88888885444",
                "ReleaseNo" :"666632344"

            }]

testingagain.js

onSubmit: function(oEvent){

            var oView = this.getView(); 
            var orderNo = oView.byId("OrderNo").getValue();
            console.log(orderNo);
        //  here order number that I give in text field is shown on the console

            var aFilters = [];

            aFilters.push(new sap.ui.model.Filter("OrderNo", sap.ui.model.FilterOperator.EQ, orderNo));

           //I do not know what to do here.


            },

Thank you in advance.

santhosh santhosh · Accepted Answer · 2018-02-12T09:57:21

Note : id has been added to panel

<Panel visible="true" expandable="false" headerText="Order_Info" expanded="false" width="auto" class="sapUiResponsiveMargin P2" id="panel">
  <content>
    <VBox alignItems="Baseline">
      <HBox alignItems="Center">
        <items>
          <Label text="Enter Order Number" labelFor="OrderNo" width="200px" />
          <Input id="OrderNo" width="200px" />
          <Button text="Submit" type="Accept" press="onSubmit" />
          <Label text="Order Number" labelFor="OrderNo" width="200px" />
          <Input id="showOrderNo" value="{OrderNo}" width="200px" />
          <Label text="AccountNo" width="200px" />
          <Input id="showAccNo" value="{AccountNo}" width="200px" editable="false" />
          <Label text="Date of Purchase" width="200px" />
          <Input id="showDate" value="{Date}" width="200px" editable="false" />
          <Label text="Requested For" labelFor="searchField" textAlign="Begin" width="100px" />
          <Input id="showRequestedFor1" value="{RequestedFor}" width="300px" textAlign="Center"></Input>
        </items>
      </HBox>
    </VBox>
  </content>
</Panel>

On submit function :

onSubmit: function(oEvent) {

  var oView = this.getView();
  var orderNo = oView.byId("OrderNo").getValue();
  var OrderCollection = [

    {
      "OrderNo": "12345",
      "RequestedFor": "Arati",
      "AccountNo": "234556777",
      "Date": "Nov 19,2017",
      "CC": "123345567889990985444",
      "ReleaseNo": "1232344"

    },

    {
      "OrderNo": "888888",
      "RequestedFor": "Arati Order 2",
      "AccountNo": "00000000",
      "Date": "Jun 21, 2017",
      "CC": "88888885444",
      "ReleaseNo": "666632344"

    }
  ]
  var reqObj = [];
  for (var i = 0; i < OrderCollection.length; i++) {
    if (OrderCollection[i].OrderNo == orderNo) {
       reqObj.push(OrderCollection[i]);
       break;
    }
  }
  oView.byId("panel").setModel(new sap.ui.model.json.JSONModel(reqObj));
  oView.byId("panel").bindElement("/0")

}

Displaying data from JSON in SAP UI5

1 Answers