Clash Royale CLAN TAG

Fill Selectize optgroup columns with AJAX in Laravel

I'm trying to assign attributes to product at client-side using Selectize.
In Laravel, against Ajax request, I'm returning a JSON object from Controller as shown below:

Selectize

Laravel

Ajax

JSON

$attribs = AttributeClass::find($request->id)->attributes;

$attributes = array();
foreach($attribs as $attrib){
$options = array();
foreach($attrib->options as $opt){
$options = array(
'id' => $opt->id,
'name' => $opt->name
);
}
$attributes = array(
'id' => $attrib->id,
'name' => $attrib->name,
'options' => $options
);
}

return response()->json([
'attributes' => $attributes
]);


The JSON output looks something like this:

JSON

"{"attributes":[
{"id":15,
"name":"Color",
"options":[
{"id":63,"name":"Red"},
{"id":64,"name":"Black"},
{"id":65,"name":"White"},
]},
{"id":16,
"name":"Material",
"options":[
{"id":69,"name":"Leather"},
{"id":70,"name":"Rubber"},
{"id":71,"name":"Suede"},
]},
{"id":17,
"name":"Size",
"options":[
{"id":73,"name":"40"},
{"id":74,"name":"41"},
{"id":75,"name":"42"},
{"id":76,"name":"43"},
{"id":77,"name":"44"}
]}
]}"


In DOM I've a div container with id #attributesContainer. I'm creating a new select element inside div and trying to populate and selectize mentioned select at ajax response like below:

div

#attributesContainer

select

div

populate and selectize

select

$('#attributesContainer').empty().append(
'<label class="col-md-3 control-label">Attributes</label>'+
'<div class="col-md-9">'+
'<select id="inputAttributes" name="inputAttributes" multiple></select>'+
'<span class="help-block">Choose product attributes</span>'+
'</div>'
);

var optGroups = ;
var options = ;

$.each(data.attributes, function(index, attribute) {
var newElement = {};
newElement['id'] = attribute.id;
newElement['name'] = attribute.name;
optGroups.push(newElement);

$.each(attribute.options, function(index, option){
var newElement = {};
newElement['id'] = option.id;
newElement['attribute'] = attribute.name;
newElement['name'] = option.name;
options.push(newElement);
});
});

$('#inputAttributes').selectize({
options: options,
optgroups: optGroups,
labelField: 'name',
valueField: 'id',
optgroupField: 'attribute',
optgroupLabelField: 'name',
optgroupValueField: 'id',
searchField: ['name'],
plugins: ['optgroup_columns', 'remove_button']
});


Expected behaviour is multiple columns like this example from Selectize docs:

But I get all values under one column like this:

What am I missing here or doing wrong? Please guide.

PS: I also want to limit the user to select only one value from each column. Does API support it? Is there any function to do this? How can I achieve this behavior in Selectize.js?

Selectize.js

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.