Q: Jquery - Select2 array with header Issue Select2: https://select2.github.io/
End result should be similar to https://select2.github.io/examples.html example multiple select boxes. 
Issue: It is showing the dropdown but all the options are Object object.

Code
$(document).ready(function () {
        function attribute(text) {
            this.text = text;
            this.children = [];
            this.addChild = function (tid, tvalue) {
                var val = { id: tid, text: tvalue };
                this.children.push(val);
            }
        }
        $.get("/products/attributelist", function (data) {
            var attributeList = [];
            $.each(data.AttributeGroups, function (i, val) {
                var tmpAttr = new attribute(val.Name);
                $.each(val.Attributes, function (val1) {
                    tmpAttr.addChild(val1.Id, val1.Name);
                });
                attributeList.push(tmpAttr);
            });
            $(".js-example-basic-multiple").select2({
                data: attributeList
            });
        });
    });

Their suggest data format
  {
  text: 'Group label',
  children: [
    {
      id: 'nested-1',
      text: 'First nested option'
    },
    // ... more data objects ...
  ]
}


A: You push list of functions (attribute) to attributeList array, so for proper format you could:
var properArray = [];

for (var i = 0; i< attributeList.length; i++) {
  properArray.push({text: attributeList[i].text, children: attributeList[i].children})
}

and pass properArray to select2 data

A: try this out 
$(document).ready(function () {
        function attribute(text) {
            return {
                text:text,
                children:[],
                addChild : function (tid, tvalue) {
                    var val = { id: tid, text: tvalue };
                    this.children.push(val);
                }
            }
        }
        $.get("/products/attributelist", function (data) {
            var attributeList = [];
            $.each(data.AttributeGroups, function (i, val) {
                var tmpAttr = attribute(val.Name);
                $.each(val.Attributes, function (val1) {
                    tmpAttr.addChild(val1.Id, val1.Name);
                });
                attributeList.push(tmpAttr);
            });
            $(".js-example-basic-multiple").select2({
                data: attributeList
            });
        });
    });

