Export ListBox Data to JSON
IntegralUI ListBox component comes with built-in functionality that allows you to export the list in full or partially to JSON. You can export the list completely or just a small portion of it, for example only selected items.
In this article, you will learn how to export the ListBox data in full or partially to JSON format. Sample code is available in JavaScript, 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
In this demo, ListBox is already populated with some data. When pressing the Export button, the code container will show the exported data in JSON format. If the 'Only Selected' option is checked, only the currently selected items are exported. To select multiple items press and hold the CTRL or SHIFT key and click on list items, then press the Export button.
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
How to Export ListBox Data to JSON
To export data from the ListBox in JSON format you need to use the following method:
exportToJSON(data, fields, spacing)Where parameters are:
- data - an array of items that you want to export
- fields - an array that contains the names of item fields that needs to be exported
- spacing - specifies blank space characters to separate the exported data objects
All parameters are optional. If not set, this method exports the ListBox data in whole with all item fields. If your data contains too many fields, you can restrict and export only those fields that you want by specifying the fields object.
How to Export Selected Items from the ListBox
If you want to export a partial data from the list, like items that are checked or currently selected, you just need to specify the data parameter that will contain only those items you want to export.
Items in the ListBox can have many fields, some of which can be custom. To limit the export result to those fields that you need, you can use the fields parameter that allows you to specify which data fields you want to export.
To see the complete list of fields used by the item object, check the item object in ListBox API under Data section.
For example, let say you want to export only selected items from the ListBox. At first, you need to select some items (either in code or by using multi selection option), then extract an array of selected items from the ListBox and apply it to the data parameter in exportToJSON method. The result will contain only selected items in JSON format.
In code above, at first we are using getList method to retrieve a list of currently selected items in the ListBox. Then exportToJSON method is called where data is specified with selected items. As a result, the export method returns a JSON string that appears in the code container.
in this example only basic information is exported, so there is no need to specify the fields parameter.
To select different items, hold the CTRL or SHIFT keys and click on items. If 'selected only' option is checked, clicking the export button will export only selected items.
Conclusion
You can export data from the IntegralUI ListBox component to JSON format, partially or in full. To do this, you need to specify what kind of data you want to export, like specific set of items, and which fields you want to export. The result is a list in JSON format.
This example has code available in JavaScript, Angular, React and Vue. It can help you to learn how to export ListBox data to JSON in different frameworks.