Question T12128
Visible to All Users

Drop-down choices coming from Database

created 2 years ago (modified 2 years ago)

Hi,

We are trying to build functionality to populate drop-down, radio button and checkbox choice values.

This particular Database API (which we don't have control over) returns data in the following format:

JSON
{ "$type": "Asi.Soa.Core.DataContracts.PagedResult`1[[Asi.Soa.Membership.DataContracts.CountryData, Asi.Contracts]], Asi.Contracts", "Items": { "$type": "System.Collections.Generic.List`1[[Asi.Soa.Membership.DataContracts.CountryData, Asi.Contracts]], mscorlib", "$values": [ { "$type": "Asi.Soa.Membership.DataContracts.CountryData, Asi.Contracts", "CountryCode": "AD", "CountryName": "Andorra", "CountrySubEntities": { "$type": "Asi.Soa.Membership.DataContracts.CountrySubEntityDataCollection, Asi.Contracts", "$values": [] }, "MailGroup": "EU", "SubEntityNameCaption": "County / region", "IsActive": true }, { "$type": "Asi.Soa.Membership.DataContracts.CountryData, Asi.Contracts", "CountryCode": "AE", "CountryName": "United Arab Emirates", "CountrySubEntities": { "$type": "Asi.Soa.Membership.DataContracts.CountrySubEntityDataCollection, Asi.Contracts", "$values": [] }, "MailGroup": "ASIA", "SubEntityNameCaption": "County / region", "IsActive": true }, { "$type": "Asi.Soa.Membership.DataContracts.CountryData, Asi.Contracts", "CountryCode": "AF", "CountryName": "Afghanistan", "CountrySubEntities": { "$type": "Asi.Soa.Membership.DataContracts.CountrySubEntityDataCollection, Asi.Contracts", "$values": [] }, "MailGroup": "ASIA", "SubEntityNameCaption": "County / region", "IsActive": true } ] }, "Offset": 0, "Limit": 3, "Count": 3, "TotalCount": 245, "NextPageLink": null, "HasNext": true, "NextOffset": 3 }

To call the API we need something like:

JavaScript
let requestVerificationToken = document.getElementById("RequestVerificationToken").value; const options = { method: 'GET', headers: { 'Content-Type': 'application/json', "RequestVerificationToken": requestVerificationToken}}; fetch('[/api/Country?Limit=3'), options) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.Error(err));

We are struggling to understand how to use the "Choice from RESTFul service" or "onLoadChoicesFromServer" to get the relevant Data especially when its not a flat and straight forward JSOn format. Can you please help us with some code example on how to achieve this with "onLoadChoicesFromServer"? Is there anything extra we need to do to handle those types of question in dynamic panels?

Thanks,
Ajay

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello Ajay,
From what I gather, to get a list of items for a Dropdown question, you need to send a request with specific header values. The response data is in a JSON format, and you wish to retrieve JSON values and use them as Dropdown choices.

You may consider the following options.

Choices from a RESTful service

Use the choicesByUrl property to configure access to a RESTful service that returns choice items.
Set the url property to an API endpoint url; use the path property to specify a path to an array of choices (for example, Items;$values). Use the valueName and titleName to specify properties from which to retrieve a choice's value and text. For example, set these properties to CountryCode and CountryName, respectively. For more information on available settings, refer to the ChoicesRestful class description.

If you wish to pass a request header, use the static Survey.ChoicesRestful.onBeforeSendRequest function. For example:

JavaScript
Survey.ChoicesRestfull.onBeforeSendRequest = function(sender, options) { options.request.setRequestHeader('RequestVerificationToken', requestVerificationToken); };

Lazy Loading

Use the onChoicesLazyLoad event to fetch data from a service. At this point, you can programmatically send a request and then use the options.setItems function to set an item array/collection. For more information, refer to the Lazy Loading demo.

Is there anything extra we need to do to handle those types of question in dynamic panels?

If you consider either of options described above, you don't need to do anything extra to handle this if a Dropdown question is placed to a dynamic panel.

Please let me know if this information helps.