CODEWITHSUNDEEP
sapui5
Sophie
Sophie

Reputation: 149

How to bind nested JSON Data in XML

I want to bind JSON Data to view I have tried as below:

XML:

<m:Select id="Employee" items="{Employee>/EmployeeList}">
<c:Item key="{Employee>key}" text="{Employee>value}" />
<m:layoutData>
    <l:GridData span="L2 M2 S2"/>
</m:layoutData>

This is how my JSON data is :

 var xyz = {
    "Employee": {

        "EmployeeList": [{
                "key": "ram",
                "value": "ram"
            },
            {
                "key": "raj",
                "value": "raj"
            },
            {
                "key": "rani",
                "value": "rani"
            }
        ]
    }
}
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(xyz);
this.getView().setModel(oModel);

I have a select box in view I want to show the employee names as dropdowns in view page.How to bind this XML.Thanks in advance

Upvotes: 0

Views: 624

Answers (2)

Marc
Marc

Reputation: 6190

There are multiple wrong assumptions:

items="{Employee>/EmployeeList}"

Here you assume that you have a model with the name Employee which has a top-level attribute EmployeeList.

In fact you have a model with no name and with a top-level attribute Employee.

You have the choice to:

  • change your binding
  • change your model

Option A: Change your binding:

This is your option if you cannot change the model (because it comes from your backend that way).

Remove the model name from your binding (since your model does not have a name). Build the correct path to your list. At the top of xyz there is a property Employee which is an object that has the property EmployeeList.

<m:Select id="Employee" items="{/Employee/EmployeeList}">
    <c:Item key="{key}" text="{value}" />
    <m:layoutData>
        <l:GridData span="L2 M2 S2"/>
    </m:layoutData>
</m:Select>

Option B: Change your model

If you are not satisfied with your model structure and think that your binding makes sense, you can also alter the model.

First, change your object so that the EmployeeList is your top level structure:

 var xyz={   
   "EmployeeList":[  
      {  
        "key":"ram",
        "value":"ram"
      },
      {  
        "key":"raj",
        "value":"raj"
      },
      {  
        "key":"rani",
        "value":"rani"
      }
   ]
}

When setting your model to your view, also provide the name that you expect in the binding:

this.getView().setModel(oModel, "Employee");

Upvotes: 5

Cmdd
Cmdd

Reputation: 897

Ok, you are setting your model on your view as unnamed model. So, the correct binding is: 

<m:Select id="Employee" items="{/Employee/EmployeeList}">
    <c:Item key="{key}" text="{value}" />
         <m:layoutData>
                <l:GridData span="L2 M2 S2"/>
         </m:layoutData>
</m:Select>

Upvotes: 1

Related Questions