Select2 выдает ошибку "Не удается прочитать свойство 'результаты' из неопределенного" - PullRequest
Новая
       10

Select2 выдает ошибку "Не удается прочитать свойство 'результаты' из неопределенного"

0 голосов
/ 08 мая 2018

Я пытаюсь заполнить форму поиска элемента управления Select2 с результатами поиска из Active Directory.

Вот моя функция select2: 

$("#networkUserSelect").select2({

    ajax: {
        url: '/Account/ADStartsWith',
        dataType: 'json',
        delay: 250,
        processResults: function (data, params) {
            return {
                results: $.map(data, function (item)
                /**http://api.jquery.com/jquery.map/ **/ {
                var name;
                var id;
                if (typeof (item.displayname) !== "undefined") {
                    name = (item.displayname["0"].replace("  ", " "));
                    id = (item.samaccountname["0"] + "@@email.com");
                    return {
                        text: name,
                        slug: name,
                        id: id
                    }
                }
                else {
                    console.log("display name undefined.");
                }
            })
        };
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1
});

URL-адрес указывает на C # WebMethod, который возвращает данные Active Directory как JsonResult. Вот формат JsonResult согласно Почтальону: 

"results": [
        {
            "id": 1,
            "text": "XXX",
            "displayName": "XXX",
            "SAMAccountName": "XXX",
            "givenName": "XXX",
            "sn": "XXX",
            "company": "XXX"
        },
        {
            "id": 2,
            "text": "YYY",
            "displayName": "YYY",
            "SAMAccountName": "YYY",
            "givenName": "YYY",
            "sn": "YYY",
            "company": "YYY"
        }
    ]

JSON успешно отправлен обратно в AJAX. Параметры processResults содержат ожидаемые значения.

В какой-то момент в части $.map результаты аннулируются, и они становятся "неопределенными", и я получаю ошибку Cannot read property 'results' of undefined.

Согласно документации Select2 , мой JSON находится в правильном формате.

Я не уверен, что мне не хватает.

Ответы [ 3 ]

0 голосов
/ 13 мая 2018

На самом деле есть проблема с вашим возвращенным JSON. Он должен быть полностью заключен в {}, например: 

{"results": [
    {
        "id": 1,
        "text": "XXX",
        "displayName": "XXX",
        "SAMAccountName": "XXX",
        "givenName": "XXX",
        "sn": "XXX",
        "company": "XXX"
    },
    {
        "id": 2,
        "text": "YYY",
        "displayName": "YYY",
        "SAMAccountName": "YYY",
        "givenName": "YYY",
        "sn": "YYY",
        "company": "YYY"
    }
]}

Далее я не уверен, как вы хотите обработать возвращаемые данные, но вот рабочая версия: 

$("#networkUserSelect").select2({

    ajax: {
        url: 'results.json',
        dataType: 'json',
        delay: 250,
        processResults: function (data, params) {
            return { 
                results: data.results.map(item => 
                    ({ 
                        text: item.displayName, 
                        id: item.SAMAccountName + "@email.com",
                        slug: item.displayName
                    })
                )}
        },
        escapeMarkup: function (markup) { return markup; }, 
        minimumInputLength: 1
    }
});

Как только вы это заработаете, возможно, вам придется заняться фильтрацией данных в бэкэнде и передачей параметра data в тело запроса, учитывая, что он содержит атрибуты фильтра запроса и пагинации.

0 голосов
/ 13 мая 2018

у вас есть опечатка, это должно быть displayName & SAMAccountName и data до data.results и, возможно, последний item.displayName["0"] до item.displayName 

$("#networkUserSelect").select2({
  ajax: {
    //url: '/Account/ADStartsWith',
    url: '//api.jsonbin.io/b/5af7d3a97a973f4ce5783c02',
    dataType: 'json',
    delay: 250,
    processResults: function(data, params) {
      return {
      	
        results: $.map(data.results, function(item) {
          var name;
          var id;
          if (typeof(item.displayName) !== "undefined") {
            name = (item.displayName.replace("  ", " "));
            id = (item.SAMAccountName + "@@email.com");
            return {
              text: name,
              slug: name,
              id: id
            };
          }
          else {
            console.log("display name undefined.");
          }
        })
      };
    },
    escapeMarkup: function(markup) {
      return markup;
    },
    minimumInputLength: 1
  }
});
.select2-container{width:300px !important}
<link href="https://select2.org/assets/7c647dd1b60ff2b17a493d7f00a18e26.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/js/select2.min.js"></script>

<select id="networkUserSelect"></select>
0 голосов
/ 11 мая 2018

Я думаю, у меня проблема. Пожалуйста, попробуйте. data это объект. data.result - это массив, который вы ищете.

РЕДАКТИРОВАТЬ: Я нашел еще 2 проблемы - опечатка в displayName & SAMAccountName.

`

$("#networkUserSelect").select2({

            ajax: {
                url: '/Account/ADStartsWith',
                dataType: 'json',
                delay: 250,
                processResults: function (data, params) {
                    return
                    {
                        /*
                             Pay attention here. `data.results`
                        */
                        results: $.map(data.results, function (item) 
                            /**http://api.jquery.com/jquery.map/ **/ {
                            var name;
                            var id;
                            if (typeof (item.displayName) !== "undefined") {
                                name = (item.displayName["0"].replace("  ", " "));
                                id = (item.SAMAccountName["0"] + "@@email.com");
                                return {
                                    text: name,
                                    slug: name,
                                    id: id
                                }
                            }
                            else {
                                console.log("display name undefined.");
                            }
                        })
                    };
                },
            },
            escapeMarkup: function (markup) { return markup; }, 
            minimumInputLength: 1
        });
...