DropDownList | Binding to JSON – Nested objects

[rajParticipant]

Hi,

In my JSON list, there are nested objects which I’m binding into dropdownlist but rendering is not happening, below is the sample code snippet

var url = "../sampledata/branchLists.txt";
{"branchJSONList":[
	{
		"area": null,
		"countryCode":"Ar",
		"branchList":[
			{
				"branchName":"ABC Corp Pte",
				"branchCode":"xyz-001"
			},
			{
				"branchName":"EFG Corp Pte",
				"branchCode":"xyz-002"
			}
		],
		"currencyList":[
			{
				"ccyId":"c-001",
				"currencyCode":"EUR",
				"currencyISO2Code":"DE",
			},
			{
				"ccyId":"c-002",
				"currencyCode":"USD",
				"currencyISO2Code":"US",
			},
			{
				"ccyId":"c-003",
				"currencyCode":"SGD",
				"currencyISO2Code":"SG",
			},
			{
				"ccyId":"c-004",
				"currencyCode":"INR",
				"currencyISO2Code":"IN",
			}
		]
	}
]}

// prepare the data
var source =
{
	datatype: "json",
	datafields: [
		{ name: 'branchName', map: 'branchList > branchName', type: 'String' },
		{ name: 'branchCode', map: 'branchList > branchCode', type: 'String' },
		{ name: 'currencyCode', map: 'currencyList > currencyCode', type: 'String' }
		{ name: 'currencyISO2Code', map: 'currencyList > currencyISO2Code', type: 'String' }
	],
	url: url,
	root: "branchJSONList",
	async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);

// Create a Branch jqxDropDownList
$("#branchListDD").jqxDropDownList({
	selectedIndex: 0, source: dataAdapter, displayMember: "branchName", valueMember: "branchCode", width: 200, height: 25
});

// Create a Currency jqxDropDownList
$("#currencyListDD").jqxDropDownList({
	selectedIndex: 0, source: dataAdapter, displayMember: "currencyCode", valueMember: "currencyISO2Code", width: 200, height: 25
});

<!--Country Dropdown-->
<div id="countryListDD">&nbsp;</div>

<!--Branch Dropdown-->
<div id="branchListDD">&nbsp;</div>

<!--Currency Dropdown-->
<div id="currencyListDD">&nbsp;</div>

Above Code Explained:
There are 3 dropdown’s, in which based on “Country” dropdown “onchange” event, I’ll send a AJAX request to server and receive a JSON response containing the values for both “Branch” & “Currency” in the above mentioned JSON format.

I want to map the,
branchList > branchName & branchList > branchCode into Branch Dropdown
currencyList > currencyCode & currencyList > currencyISO2Code into Currency Dropdown

Can someone suggest me a solution?

Looking forward.

Regards,
Raj

[VladimirParticipant]

Hello raj,

If I understand you correctly, your problem is that the datafield mapping is not working properly for you.

The default mapping character is > without spaces before and after. So change your code to:

datafields: [
		{ name: 'branchName', map: 'branchList>branchName', type: 'String' },
		{ name: 'branchCode', map: 'branchList>branchCode', type: 'String' },
		{ name: 'currencyCode', map: 'currencyList>currencyCode', type: 'String' }
		{ name: 'currencyISO2Code', map: 'currencyList>currencyISO2Code', type: 'String' }
	],

I hope that helps

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[rajParticipant]

Hi Vladimir,

Thanks for your solution.

This is to inform you that, it was my mistake while submitting a code in this forum. Actually, in my development code there are no spaces before and after the > symbol. Even though the mapping is not working properly.

Note: I double checked the code

Can you please provide me a sample fiddle implementation alike my JSON format i.e. Nested Objects?

Looking for your reply.

Regards,
Raj

[VladimirParticipant]

Hello raj,

I suspect that you want to do something like this:

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[rajParticipant]

Hi Vladimir,

Thanks for your wonderful solution.

Actually, once after the “onchange” of “Country” dropdown; I get the JSON response through AJAX in the format which I had provided; from which I need to do only mapping for Branch & Currency dropdown’s. Not based on the JSON which I had received I will render the Country dropdown itself.

My question is, how do I map datafields from the nested objects of JSON using the same source i.e. with the help of map (>) in Source definition?

Looking for your reply.

Regards,
Raj

[VladimirParticipant]

Hello raj,

You need to use two adapters as shown in the fiddle, as you have 2 arrays of data nested into 1 array which is the branchJSONList.
Also it is not advised to use the same dataAdapter for two separate widgets.

You can either use your own AJAX request and set the two dataAdapters in the success handler to something like source: data.branchJSONList[0].branchList and source: data.branchJSONList[0].currencyList

Or you can use a dataAdapter’s ajax capabilities, and just call dataAdapter.dataBind() method to initiate the call in the onchange of country dropdown. And have the initialization of the branchlist and currencyList go into that dataAdapter onLoadComplete() callback.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts