How to bind nested JSON Data in XML

Question

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

It looks to me that you have forgotten the '>' after the model name in your binding. "{Employee/EmployeeList}" should be "{Employee>/EmployeeList}" — J_rite
– J_rite, Commented Mar 19, 2020 at 7:47
sorry it was by mistaken i have kept but dropdown values are not showing in xml view — Sophie
– Sophie, Commented Mar 19, 2020 at 7:56
Do you get the right amount of empty items in your dropdown? — J_rite
– J_rite, Commented Mar 19, 2020 at 7:58
It's because you have to get the values from the model. <c:Item key="{Employee>key}" text="{Employee>Value}" /> should work. — J_rite
– J_rite, Commented Mar 19, 2020 at 8:01

Marc · Accepted Answer · 2020-03-19 10:35:44Z

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");

Cmdd · Accepted Answer · 2020-03-19 10:34:00Z

1

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>

answered Mar 19, 2020 at 10:34

Cmdd

9271 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to bind nested JSON Data in XML

2 Answers 2

Option A: Change your binding:

Option B: Change your model

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option A: Change your binding:

Option B: Change your model

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related