Change the object array key in the select2 plugin datasource.

davykiash

Hello,

I am rendering the following dataset in my select2 plugin successfully.

categoryData = [
    { "label": "NON-CONSUMABLES", "value": "62a71479-2ac8-44ea-b119-85c718dfa545" },
    { "label": "CONSUMABLES", "value": "b1668ac6-724a-4a3b-8bf9-318f41e76b51" },
    { "label": "ELECTRONICS", "value": "7cd96ad2-e9b0-4645-a82d-613b502e7108" },
    { "label": "FAST MOVING", "value": "b6ef3eb0-c99b-48d5-8131-7697693b06e1" },
    { "label": "SERVICES", "value": "adf812e7-2ea7-424a-a339-ef8eadb1ec57" }
];

However the data I need to display in the select2 plugin comes with a different set of keys.

categoryData = [
    { "inventory_categories_desc": "NON-CONSUMABLES", "uuid": "62a71479-2ac8-44ea-b119-85c718dfa545" },
    { "inventory_categories_desc": "CONSUMABLES", "uuid": "b1668ac6-724a-4a3b-8bf9-318f41e76b51" },
    { "inventory_categories_desc": "ELECTRONICS", "uuid": "7cd96ad2-e9b0-4645-a82d-613b502e7108" },
    { "inventory_categories_desc": "FAST MOVING", "uuid": "b6ef3eb0-c99b-48d5-8131-7697693b06e1" },
    { "inventory_categories_desc": "SERVICES", "uuid": "adf812e7-2ea7-424a-a339-ef8eadb1ec57" }
];

Now given my current editor which works well with the first set of data, are there options that I can adjust in the select2 plugin to work with the second set of data?

fields: [ 
                                    
        {
            label: "Item Code:",
            name: "inventory_main_list.inventory_main_list_code"
        },
        {
            label: "Item Category:",
            name: "inventory_main_list.inventory_main_list_cat_link_uuid",
            type: 'select2',
            opts: {
                   "placeholder": "Select Category",
                   "allowClear": true
                },
            options: categoryData 
        },
        {
            label: "Item Description:",
            name: "inventory_main_list.inventory_main_list_desc"
        }
]

allan

Yes, you can use an optionsPair parameter for the Select2 plug-in, in exactly the same way as for the select field type. That let's you set the label and value properties.

I missed that in the Select2 documentation - sorry. I'll add it just now.

Allan

davykiash

@allan A simple code example will help.

davykiash

@allan

I finally figured it out

optionsPair: {
    label: 'inventory_categories_desc',
    value: 'uuid'
}

Another workaround would have been to change the key values via javascript.

var i;
for(i = 0; i < data.length; i++){
    
    data[i].value = data[i]['uuid'];
    delete data[i].uuid;
    
    data[i].label = data[i]['inventory_units_of_measure_desc'];
    delete data[i].inventory_units_of_measure_desc;
    
}