Load JSON Data in ListBox
In general, when you have custom data fields you can use item templates to create the list in the ListBox component. As a data source you can use a JSON file where items can have custom data fields. In cases where you have different field names for items than the ones used by the ListBox component, you can still populate the list box with the data, but first you need to map the field names of your data source to the ones that are already in use.
Here you will learn how data binding works in ListBox with custom data source, in this case a JSON file. The sample code below that shows how to load JSON data into ListBox, is available in each JavaScript framework: Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows a ListBox that is populated with data from a JSON file. The names of the data fields are different from the ones used by the list box. Using data binding, an object is provided which maps the custom field names with the ones that ListBox uses.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
Data Binding in ListBox Component
In case of ListBox component, data binding is only required when your data source has different field names for item object (from which the list is constructed) than the ones used by the ListBox. The dataFields property that is part of the ListBox accepts an object that replaces the default field names with your own. Here is a list of fields that are predefined and already in use:
dataFields = {
allowDrag: 'allowDrag', // Determines whether item is draggable or not
allowDrop: 'allowDrop', // Determines whether item can accept drops over its space
allowEdit: 'allowEdit', // Determines whether item is editable
allowFocus: 'allowFocus', // Determines whether item can accept input focus
data: 'data', // Specifies a custom object associated with the item
enabled: 'enabled', // Specifies whether the item is enabled or disabled
group: 'group', // Specifies the parent group to which item belongs
icon: 'icon', // Specifies the name of a custom CSS class that represents an icon
iconUrl: 'iconUrl', // Specifies the URL that represents an icon
id: 'id', // Specifies an unique identifier for the item
selected: 'selected', // Specifies whether the item is selected
style: 'style', // An object with custom CSS settings
text: 'text', // Specifies the item label
tooltip: 'tooltip', // A message displayed as a Tooltip
value: 'value', // A custom object, simple numeric or text value associated with the item
visible: 'visible' // Specifies whether the item will show in the list or it will be excluded
}
In this example, the data source is a JSON file where different field names are in use to replace the fields: id, icon and text. As you can see from code below, the listFields object replaces the item id to itemId, icon to itemIcon and text to label.
When new field names are in use, you also need to update the item template with the new names, based on the ones used in your data source.
How to Load JSON Data into ListBox
Once the new field names are provided, you can load the data from the JSON file into the ListBox. For this purpose, depending on framework of your choice (Angular, React, Vue or other), loading a data file may be different. Angular uses http service, in React you can just import the data from a file or using JavaScript you can fetch the data from provided location. Here is an example:
Once the data is successfully loaded, prior populating the ListBox with data, to increase performance is to suspend any updates to the layout. Once updates are suspended, you can call the loadData method, specifying the JSON data and the listFields object that holds the new data field names. Once data is loaded, you can resume and update the ListBox layout, this will refresh and shows the list based on provided template for each item.
Here is the JSON data used in this example:
Conclusion
Populating the IntegralUI ListBox component with data from a custom data source like a JSON file is simple. Your data source can have different field names for item objects, you only to provide an object that will match the names from your data source and the ones used by the ListBox. This is only the case if some of these custom fields are replacing the predefined ones used by the ListBox, otherwise you can just use template. This allows you to keep the original format of your data and populate the list box from a local or remote data source.
IntegralUI Web is an UI library of native web components that includes the ListBox. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.