Select2 并加载 JSON 数据

Question

I have read a lot of questions here, but i'm not able to solve this

$('.titular').select2({
            placeholder: 'Select',
            width: '100%',
            ajax: {
                url: "/ajax/ajax.php",
                data: function(params) {
                    var query = {
                        query: params.term
                      }
                      return query;
                },
                processResults: function(data) {
                    console.log(data);

                    return {
                        results: $.map(data, function (item) {
                            return {
                                id: item.id,
                                nome: item.nome
                            }
                        })
                    };

                },
            },
            escapeMarkup: function (markup) { return markup; }

        });

And my JSON:

[{"id":12,"nome":"Joe Bill"},{"id":13,"nome":"PJ"},{"id":14,"nome":"John"},{"id":16,"nome":"Acme"},{"id":17,"nome":"Acme2"},{"id":18,"nome":"Acme3"}]

The results are not showing and developer console shows:

jQuery.Deferred exception: Cannot use 'in' operator to search for 'length' in [{"id":16,"nome":"Acme"},{"id":17,"nome":"Acme2"},{"id":18,"nome":"Acme3"}] TypeError: Cannot use 'in' operator to search for 'length' in [{"id":16,"nome":"Acme"},{"id":17,"nome":"Acme2"},{"id":18,"nome":"Acme3"}]

I've tried to use the JSON viewed in oficial documentation, unsuccesfully...

I appreciate any help

Answer 1

The console error means that you are passing to the map an string so you need to parse your data as json before. I've done a little test and it is working like this:

processResults: function (data, params) {
        data = JSON.parse('[{ "id": 12, "nome": "Joe Bill" }, { "id": 13, "nome": "PJ" }, { "id": 14, "nome": "John" }, { "id": 16, "nome": "Acme" }, { "id": 17, "nome": "Acme2" }, { "id": 18, "nome": "Acme3" }]');

        var r = $.map(data, function (item) { return { id: item.id, text: item.nome }});
        return { results: r };
}

Hope this helps.