I've got select2 set up and working using a JS variable to load in the data, however because my data has a lot of options (countries), I'd like to load them from a rather than have that in my JS.

I've created a countries.json file with all the countries in it, and I'm using the below code to try and pull them in. However I get the error The results could not be loaded.

Code:

$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
        processResults: function (data) {
            return {
                results: $.map(data, function(obj) {
                    return { id: obj.ime, text: obj.ime };
                })
            };
        }
    },
});

countries.json

[{id:1, text: 'Afghanistan'},
{id:2, text: 'Aland Islands'},
{id:3, text: 'Albania'},

...

{id:245, text: 'Yemen'},
{id:246, text: 'Zambia'},
{id:247, text: 'Zimbabwe'}]

I've got select2 set up and working using a JS variable to load in the data, however because my data has a lot of options (countries), I'd like to load them from a rather than have that in my JS.

I've created a countries.json file with all the countries in it, and I'm using the below code to try and pull them in. However I get the error The results could not be loaded.

Code:

$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
        processResults: function (data) {
            return {
                results: $.map(data, function(obj) {
                    return { id: obj.ime, text: obj.ime };
                })
            };
        }
    },
});

countries.json

[{id:1, text: 'Afghanistan'},
{id:2, text: 'Aland Islands'},
{id:3, text: 'Albania'},

...

{id:245, text: 'Yemen'},
{id:246, text: 'Zambia'},
{id:247, text: 'Zimbabwe'}]

• javascript
• json
• jquery-select2

Share Improve this question Follow asked Nov 28, 2017 at 10:29 d.abyssd.abyss 21211 gold badge55 silver badges2626 bronze badges 4

• You dont need to reproccess you country result, select2 wait id and text. Same as your json file. If you anyway have to do it, do return { id: obj.id, text: obj.text }; – Camille Commented Nov 28, 2017 at 11:03
• @Camille I don't have any special need for it, this is just the only example code I could find for my purpose :( im not familiar with javascript or jquery so I'm quite lost with this. I can fix it by storing data in javascript var but really should be done with a json file. – d.abyss Commented Nov 28, 2017 at 11:27
• ok, remove function processResults to only have dataType and url attributes in ajax – Camille Commented Nov 28, 2017 at 11:33
• @Camille I found the problem, the data in json file was not in correct format. My data now loads correctly. – d.abyss Commented Nov 28, 2017 at 12:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Found the solution with the help of @Camille.

1. Unnecessary reprocessing the json file (only necessary if your json file uses different identifiers than "id" and "text"

2. The json file was in an incorrect format, see https://select2/data-sources/formats

Code:

// Create countries dropdown
$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
    },
});

countries.json

{
    "results": [
    {
        "id": 1,
        "text": "Afghanistan"
    },
    {
        "id": 2,
        "text": "Aland Islands"
    },
    {
        "id": 3,
        "text": "Albania"
    },

...

    {
        "id": 245,
        "text": "Yemen"
    },
    {
        "id": 246,
        "text": "Zambia"
    },
    {
        "id": 247,
        "text": "Zimbabwe"
    }
    ]
}