Binding of data in SAP UI5

Question

I have a design something like the below picture (see attached pic). And the model is something like this:-

 {
  "Approvers": [
    {
      "AFE_ID": "DV-101007600DD",
      "AFE_NAME": "San Andreas 1",
      "COST_CENTER": "101007600",
      "LOCATION": "Midland",
      "VERSION": "Revised",
      "DEADLINE": "15th May 2020",
      "ACTION": "Approve/Reject",
      "STATUS": "Completed",
      "WBS_ID": "WBS Element 1",
      "CREATED_BY": "James Edwin",
      "CREATED_ON": "22-04-2020",
      "OWNER": "Dri Mathews",
      "LEVEL": {
        "LEVEL1": [
          {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          },
          {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          }
        ],
        "LEVEL2": [
          {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          },
          {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          }
        ]
      }
    }
  ]
}

I am trying to bind in a way that two boxes should get created based on the levels and each of these boxes should have the data as per the json ie LEVEL 1 and LEVEL2 data in each of those boxes. In the code below i have binded the Grid controller for Level which creates two boxes but when i try to fill each of these boxes with table content it gets the same content. Please suggest how i can correct this binding?

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
                                <f:layout>
                                    <f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem"/>
                                </f:layout>
                                <f:layoutS>
                                    <f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem"/>
                                </f:layoutS>
                                <f:items>
                                    <FlexBox class="columns">
                                        <layoutData>
                                            <f:GridContainerItemLayoutData columns="12"/>
                                        </layoutData>
                                        <VBox backgroundDesign="Solid" class="demo">
                                            <VBox>
                                                <Label text="Level" design="Bold" class="sapUiSmallMarginTop sapUiMediumMarginBegin"/>
                                            </VBox>
                                            <VBox>
                                                <Table id="idApproversTable" class="demo" inset="false" growing="true"
                                                    items="{ path: 'approversCollection>/Approvers/0/LEVEL/2' }">
                                                    <columns>
                                                        <Column demandPopin="true">
                                                            <Label text="APPROVER NAME" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="DEPARTMENT" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="APPROVED ON" design="Bold"/>
                                                        </Column>
                                                    </columns>
                                                    <items>
                                                        <ColumnListItem>
                                                            <cells>
                                                                <Text text="{approversCollection>APPROVER_NAME}"/>
                                                                <Text text="{approversCollection>DEPARTMENT}"/>
                                                                <Text text="{approversCollection>APPROVED_ON}"/>
                                                            </cells>
                                                        </ColumnListItem>
                                                    </items>
                                                </Table>
                                                <layoutData>
                                                    <FlexItemData growFactor="1" baseSize="0" backgroundDesign="Solid" styleClass="sapUiTinyMargin"/>
                                                </layoutData>
                                            </VBox>
                                        </VBox>
                                    </FlexBox>
                                </f:items>
                            </f:GridContainer>

Answer 1

You need to use the correct absolute/relative Paths and modify your Model accordingly:

...
"LEVEL":  [
    { "DATA" : [
        {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        },
        {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        }
    ]},
    { "DATA" : [
        {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        },
        {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        }
    ]}
]
...

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
...
    <Table id="idApproversTable" 
        class="demo"
        inset="false" 
        growing="true"
        items="{ path: 'approversCollection>DATA' }">
...
        <Text text="{approversCollection>APPROVER_NAME}"/>
        <Text text="{approversCollection>DEPARTMENT}"/>
        <Text text="{approversCollection>APPROVED_ON}"/>