Select2 json data not working

Question

I am trying to hook select2 when an element has class "select2picker" i am also customising if the source of the dropdown list is an array. My code below

$('.select2picker').each(function() {
                var settings = {};


                if ($(this).attr('data-json')) {
                    var jsonValue = JSON.parse($(this).attr('data-json')).val());
                    settings = {
                        placeholder: $(this).attr('data-placeholder'),
                        minimumInputLength: $(this).attr('data-minimumInputLength'),
                        allowClear: true,
                        data: jsonValue
                    }
                }

                $(this).select2(settings);
            });

but the result is horrible it fails to hook all the select2 dropdownlist

but when I comment out the data property, the output shows perfect (but the data binding goes missing)

My array looks like the following

[ { "id": "2015-0152", "text": "2015-0152" }, { "id": "2015-0153", "text": "2015-0153" }, { "id": "2016-0001", "text": "2016-0001" }, { "id": "2016-0002", "text": "2016-0002" }, { "id": "2016-0003", "text": "2016-0003" }, { "id": "2016-0004", "text": "2016-0004" }, { "id": "2016-0005", "text": "2016-0005" }, { "id": "2016-0006", "text": "2016-0006" }, { "id": "2016-0007", "text": "2016-0007" }, { ... }, { "id": "2015-0100", "text": "2015-0100" }, { "id": "2015-0101", "text": "2015-0101" }, { "id": "2015-0080", "text": "2015-0080" }, { "id": "2015-0081", "text": "2015-0081" }, { "id": "2015-0090", "text": "2015-0090" }, { "id": "2015-0102", "text": "2015-0102" }, { "id": "2015-0112", "text": "2015-0112" }, { "id": "2015-0128", "text": "2015-0128" }, { "id": "2015-0136", "text": "2015-0136" } ]

I am really confused about what is going wrong. Any idea?

Select2 version: 3.4.8

Answer 1

This line gives an error: var jsonValue = JSON.parse($(this).attr('data-json')).val());

Should be: var jsonValue = JSON.parse($(this).attr('data-json')); .

Also this line in your question:

i am also customising if the source of the dropdown list is an array

Indicates to me that it might also not be an array. In that cause you should check if it is an array before you pass the data to select2.

EDITED: Another thing that came to my mind was the following. If you're using data properties for the placeholder I don't think you need to pass the values of those properties to select2 a second time like you do here

placeholder: $(this).attr('data-placeholder'),
minimumInputLength: $(this).attr('data-minimumInputLength'),

Might be that you need to pick one of the two (either pass it along in your settings, or use an attribute). As select2 looks at the data attributes to get a value.

I checked if the above was correct turns out it isn't. It works fine in this fiddle: https://jsfiddle.net/wL7oxbpv/

I think there is something wrong with your array data. Please check that.