Select2 给出错误“无法读取未定义的属性‘结果’”答案

【问题标题】：Select2 gives error "Cannot read property 'results' of undefined"Select2 给出错误“无法读取未定义的属性‘结果’”
【发布时间】：2018-05-08 20:25:11
【问题描述】：

我正在尝试使用来自 Active Directory 的搜索结果填充可搜索的 Select2 表单控件。

这是我的 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 documentation，我的 JSON 格式正确。

我不确定我错过了什么。

【问题讨论】：

item.displayname 是否未定义？
我不确定。我无法在该返回块中执行断点或 console.log 命令。就好像该代码根本没有被命中一样。
你试过我下面提到的解决方案了吗？
代码似乎没有问题（在@RitwickDey 更正后）您提供的数据，因此您未在此处共享的数据发生了问题。您需要获取问题的堆栈跟踪，并且它可能是您的代码中未处理的边缘情况，导致实际数据出现问题

标签： c# jquery json ajax jquery-select2

【解决方案1】：

我想我有问题。请试一试。 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
        });

【讨论】：

这不起作用，尽管这可能是因为我在回复您的第一条评论时提到的代码块没有被命中。
糟糕！我发现了另一个问题。它是displayName，而不是“显示名称”。我很快就会更新答案
我更新了答案。现在，请试一试。如果它不起作用，我知道为什么。！ :(
那也没有解决问题。感谢您的时间和精力..

【解决方案2】：

其实你返回的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参数传递到请求正文中，因为它包含查询过滤器和分页属性。

【讨论】：

【解决方案3】：

你有错字，应该是 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>

【讨论】：