javascript - Select2 从本地json文件加载数据

Question

我已经设置了 select2 并使用 JS 变量加载数据，但是因为我的数据有很多选项(国家/地区)，所以我想从中加载它们而不是在我的JS.

我创建了一个包含所有国家/地区的 countries.json 文件，我正在使用以下代码尝试将它们拉入。但是我收到错误消息The results could not be loaded.

代码:

$('#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 };
                })
            };
        }
    },
});

国家.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'}]

Answer 1

在@Camille 的帮助下找到了解决方案。

1. 不必要地重新处理 json 文件(仅当您的 json 文件使用与 “id” 和 “text”

   不同的标识符时才需要)

2. json 文件的格式不正确，参见 https://select2.org/data-sources/formats

代码:

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

国家.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"
    }
    ]
}