Skip to Content

Simple combo box binding issue to external service

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

json.jpg (59.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Sep 07, 2017 at 09:26 AM

    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>
    
    Add comment
    10|10000 characters needed characters exceeded