Select2 inserts an empty text option in the dynamic list

Question

I am using Select2 with Jquery-editable and encountering an abnormal behavior of Select2, what I am doing is displaying editable table of information using ejs template, and as user clicks on CBA opens up a select2 box which have the originally selected result, and then user can add or delete options in it, options comes from Database source, and when user selects an options it adds an empty option in database with the selected option , the array looks like this

[ "ABCD", "ONAB", "" , "BCNU" ]

I read somewhere about allowClear: true and add a placeHolder but It doesn't helped me at all. As everything is done dynamically I can't find where that empty option is added.

Code is below:

Ejs/HTML code for Select 2

<tr>
<td width="40%">Select CBA(s)</td>
<td>
    <a class="cbaSelectUnit" data-emptytext="Select CBA(s)" data-original-title="Select CBA(s)" data-type="select2"></a>
</td>

Javascript for Select 2

    $("a[data-name='Cba']").editable({
    showbuttons: 'false',
    emptytext: 'None',
    display: function(values) {
        var html = [];
        html.push(values);
        $(this).html(html);
    },
    select2: {
        multiple: true,
        allowClear: true,
        placeholder: "Select CBA(s)",
        ajax: {
            // url is copied from data-source via x-editable option-passing mechanism
            dataType: 'json',
            // pass the '?format=select2' parameter to API call for the select2-specific format
            data: function(term, page) {
                return {
                    deptId: departmentId,
                    format: 'select2'
                };
            },
            // transform returned results into the format used by select2
            results: function(data, page) {
                return {
                    results: data
                };
            }
        },
        // what is shown in the list
        formatResult: function(cba) {
            return cba.text;
        },
        // what will appear in the selected tag box
        formatSelection: function(cba) {
            return cba.text;
        },
        // rendering id of the values to data.value requirement for Select 2
        id: function(cba) {
            return cba.value;
        },
        // what is shown in the selected-tags box
        initSelection: function(element, callback) {
            var id = $(element).val(),
                result = id.replace(/^,\s*$/, ',').split(",").map(function(v) {
                    return {
                        id: v,
                        text: v
                    };
                });
            callback(result);
        }
    }
});

Format in which Code is returned from the database:-

    Facility.findOne({ _id: department.Facility }, function(err, facility) {
    if (err) {
        res.send(500, err);
    } else if (!facility) {
        res.send(404, 'Facility not found');

    } else if (req.query.format && req.query.format === 'select2') {
        var result = facility.Cba.map(function(c) {
            return { value: c, text: c };
        });
        res.json(result);

    }
});

Image showing an empty box added by itself

How Array looks after I edit

Answer 1

So it was just a simple syntax error, I was doing found out by myself,

I was returning cba.value as id, but the initSelection was returning

{id: v, text: v}

it should be value & text instead of id & text.

       // what is shown in the selected-tags box
    initSelection: function(element, callback) {
        var id = $(element).val(),
            result = id.replace(/^,\s*$/, ',').split(",").map(function(v) {
                return {
                    value: v,
                    text: v
                };
            });
        callback(result);
    }