How to add this optgroup json data to Select2?

Question

I want to create a dropdown list using select but with option groups in it. Since Select2 requires JSON format, I use ajax to go to Controller and could successfully return with the JSON object I want. Let's say it looks like this:

Note that the JSON data returned each time are not fixed.

In javascript, I wrote the code which is in the snippet

 var option = [{ "text": "Group A", "children": [{ "id": "0", "text": "B00000001" }, { "id": "1", "text": "B00000007" }, { "id": "2", "text": "B00000008" } ] }, { "text": "Group B", "children": [{ "id": "0", "text": "B00000002" }, { "id": "1", "text": "B00000004" }, { "id": "2", "text": "B00000005" }, { "id": "3", "text": "B00000006" } ] } ]; $("#selectForm").select2({ width: '30%', allowClear: true, placeholder: "Select Form", ajax: { url: '@Url.Action("GetOptionList")', delay: 250, dataType: "json", type: "POST", data: function (term) { return { term: term }; }, processResults: function (data) { return { results: $.map(data, function (item, key) { var children = []; for (var k in item) { var childItem = item[k]; childItem.text = item[k].text; children.push(childItem); } return { text: key, children: children, } }) }; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <select id="selectForm"></select>

Can you point out what is wrong and how to make it correct? I have spent several hours trying but still being stuck.

Answer 1

I have found the answer. Since the data returned from ajax is already in the proper format I won't need to map or anything.

Just:

processResults: function (data) {
  return{
    results: data
  }
}

Answer 2

 var option = [{ "text": "Group A", "children": [{ "id": "0", "text": "B00000001" }, { "id": "1", "text": "B00000007" }, { "id": "2", "text": "B00000008" } ] }, { "text": "Group B", "children": [{ "id": "0", "text": "B00000002" }, { "id": "1", "text": "B00000004" }, { "id": "2", "text": "B00000005" }, { "id": "3", "text": "B00000006" } ] } ]; $("#selectForm").select2({ width: '30%', allowClear: true, placeholder: "Select Form", data: option, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <select id="selectForm"></select>

this JSON is in the proper format, I have directly passed the option JSON to data, instead of that you can assign it using JSON as below

processResults: function (data) {
    return {
        results: data
    }
}

no need any other changes.