Select 2 4.0 Hirearchical Data Assistance

Question

So I have been trying to get a Hirearchical data in Select2 component. But it just dosent seem to work. I have used Select2 before and I think the code is the same, In Select 2 4.0 the data wont be displayed.

            var data = [
                {
                    "description" : "Parent" ,
                    "children" : [
                        {
                            "description" :"Child 1",
                            "id" : "11",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "111"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "112"
                                }
                            ]
                        },
                        {
                            "description" :"Child 2",
                            "id" : "12",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "121"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "122"
                                }
                            ]
                        }
                    ],
                    "id" : "1"
                }
            ];

            function descFormatResult(item) {

            }

            function descFormatSelection(item) {
                return item.description;
            }


            $("#e10_2").select2({
                matcher: function (term, text) {
                    return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
                },
                placeholder: "Location",
                minimumInputLength: 0,
                data:{
                        results: data,
                        text : "description"
                    },
                escapeMarkup: function (text) {
                    return text;
                },
                templateResult: descFormatResult
            });

I do have a fiddle here JSFiddle

Any assistance would be great Thanks.

Answer 1

"This release contains many breaking changes, but easy-upgrade paths have been created as well as helper modules that will allow for backwards compatibility to be maintained with past versions of Select2. Upgrading will require you to read the release notes carefully, but the migration path should be relatively straightforward. You can view a list of the most common changes that you will need to make in the release notes." - https://select2.github.io/announcements-4.0.html