Simple combo box binding issue to external service

[karim_mohamed2]

Dear Gurus

I was trying to bind a combo box in the onInit method with an external services with json model the code of the onInit as below

var GroupsCombo = this.getView().byId("cmbMainGroups");
		var url = "proxy/http/localhost:20595/api/tbl_Services?$format=json";
		var oModel = new sap.ui.model.json.JSONModel();
		var aData = jQuery.ajax({
			type : "GET",
			contentType : "application/json",
			url : url,
			dataType : "json",
			async : false,
			success : function(data, textStatus, jqXHR) {
				oModel.setData({
					modelData : data
				});
				// alert("success to read");
			}
		});
		GroupsCombo.setModel(oModel, "mainGroups");

The returned data from the service

[
{tbl_CenterServices: [ ],
ServiceID: 1,
Description: "توضيب المحرك"
},

{tbl_CenterServices: [ ],
ServiceID: 2,
Description: "إصلاح ناقل الحركة"
},

{tbl_CenterServices: [ ],
ServiceID: 3,
Description: "إصلاح الفرامل"
},

{tbl_CenterServices: [ ],
ServiceID: 4,
Description: "إصلاح نظام عادم السيارة(الشكمان)"
},

{tbl_CenterServices: [ ],
ServiceID: 5,
Description: "إصلاح المكيف"
},

{tbl_CenterServices: [ ],
ServiceID: 6,
Description: "إصلاح الردياتير (المشع)"
},

{tbl_CenterServices: [ ],
ServiceID: 7,
Description: "دهان وسمكرة"
},

{tbl_CenterServices: [ ],
ServiceID: 8,
Description: "ضبط زويا العجل واتزان العجلات"
},

{tbl_CenterServices: [ ],
ServiceID: 9,
Description: "إصلاح إطارات"
},

{tbl_CenterServices: [ ],
ServiceID: 10,
Description: "تغيير زيت"
},

{tbl_CenterServices: [ ],
ServiceID: 11,
Description: "فرش داخلي"
}
]

The code in the XML view

<ComboBox id="cmbMainGroups" items="{mainGroups>/tbl_Services}"	placeholder="Type to select the group">
				<core:Item key="{mainGroups>ServiceID}" text="{mainGroups>Description}" />
			</ComboBox>

And i can see the data when i debug the app and also i can find it in the combobox oModels ----> oData as below

And after that the data is not bound to the control any ideas how to solve this issue

Thanks in advance

[Joseph_BERTHE · Accepted solution]

Hello,

First of all, use JSONModel to call your service it will be cleaner :

var oModel = new JSONModle();

oModel.loadData(url);

It will automatically populate your model. You can attache request event to modify the model structure.

Then, in you code I see that your model is :

oModel = { modelData: data };

and you put those data inside another model called

mainGroups

Thus, in your XML view, you should have something like this

<ComboBox id="cmbMainGroups" items="{mainGroups>/modelData}"	placeholder="Type to select the group">
	<core:Item key="{mainGroups>ServiceID}" text="{mainGroups>Description}" />
</ComboBox>

[karim_mohamed2 · Accepted solution]

Thanks Joseph

It works now 🙂 🙂