Bind json data into Listbox and dropdown box controls in openui5

Question

I am new to openui5. Can anyone assist me, how to bind the json data into Listbox and dropdownbox controls(In my case, I am using JSView and sap.ui.commons library) in openui5. I am having separate json file in my eclipse and also I have added my code snippet here.

//Create Model 
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/Transaction_State.json");
oTransstlistbx.setModel(oModel);
oTransstlistbx.bindProperty("/state_name");

//Create a instance for ListBox
var oTransstlistbx = new sap.ui.commons.ListBox({
    allowMultiSelect: true,
    visibleItems: 4,
    items: [
        new sap.ui.core.ListItem({ text: "sample1" }), //need to bind json data here
        new sap.ui.core.ListItem({ text: "sample1" }), //need to bind json data here
        new sap.ui.core.ListItem({ text: "sample3" }), //need to bind json data here
    ]
});

This data is coming from Transaction_State.json file. I am able to load the JSON data but how can I bind the data to Listbox items? Any help would be greatly appreciated.

Answer 1

See this example https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ComboBox/preview

if this is the json in JSONmodel (products.json - for example it contains 3 records)

{
 "ProductCollection": [
  {
   "ProductId": "1239102",
   "Name": "Power Projector 4713",
   "Category": "Projector",
   "SupplierName": "Titanium",
   "Description": "A very powerful projector with special features for Internet usability, USB",
   "WeightMeasure": 1467,
   "WeightUnit": "g",
   "Price": 856.49,
   "CurrencyCode": "EUR",
   "Status": "Available",
   "Quantity": 3,
   "UoM": "PC",
   "Width": 51,
   "Depth": 42,
   "Height": 18,
   "DimUnit": "cm",
   "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg"
  },
  {
   "ProductId": "2212-121-828",
   "Name": "Gladiator MX",
   "Category": "Graphics Card",
   "SupplierName": "Technocom",
   "Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
   "WeightMeasure": 321,
   "WeightUnit": "g",
   "Price": 81.7,
   "CurrencyCode": "EUR",
   "Status": "Discontinued",
   "Quantity": 10,
   "UoM": "PC",
   "Width": 34,
   "Depth": 14,
   "Height": 2,
   "DimUnit": "cm",
   "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"
  },
  {
   "ProductId": "K47322.1",
   "Name": "Hurricane GX",
   "Category": "Graphics Card",
   "SupplierName": "Red Point Stores",
   "Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
   "WeightMeasure": 588,
   "WeightUnit": "g",
   "Price": 219,
   "CurrencyCode": "EUR",
   "Status": "Out of Stock",
   "Quantity": 25,
   "UoM": "PC",
   "Width": 34,
   "Depth": 14,
   "Height": 2,
   "DimUnit": "cm",
   "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg"
  }
  
}

you can initialize the model in the controller of the view

var oModel = new sap.ui.model.json.JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
        this.getView().setModel(oModel);

Then map it in your vonponent in the XML-view

<ComboBoxitems="{path: '/ProductCollection'}">
    <core:Item key="{ProductId}" text="{Name}" />
</ComboBox>

where you have to set the path (the directory of the array in your json) and map each property of component that you want valorize https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.ComboBox/properties to a property in the model