jQuery Select2加载JSON数据报slice未定义错误如何解决

• 结果集取值路径错误：processResults回调内使用data.items获取选项列表，但后端返回的JSON数据顶层仅存在results字段，无items字段，最终传入Select2组件的结果集为undefined，组件内部对该值调用数组方法slice时就会触发你看到的类型错误。
• 配置项位置错误：dataType: 'json'是jQuery AJAX的专属配置，必须放在ajax配置对象内部才会生效。当前写法将该参数放在Select2初始化的根配置层级，jQuery无法自动将后端返回的JSON字符串解析为JavaScript对象，会进一步加剧数据解析异常。

前端初始化代码修正 #

调整配置位置与取值路径，修正后代码如下：

$('#task_dname').select2({
  placeholder: 'Select an item',
  // tags: true,
  // cache: true,
  delay: 250,
  maximumInputLength: 20,
  minimumInputLength: 2,
  ajax: {
    type: 'post',
    url: 'query_list_tasks.php',
    dataType: 'json', // 移入ajax配置内部
    data: function (params) {
      return {
        searching: params.term,
        query: 'task_list'
      };
    },
    processResults: function (data) {
      console.log(data);
      // 匹配后端返回的字段名，从data.results取数
      return {
        results: data.results
      };
    }
  }
});

后端代码优化（可选） #

手动拼接JSON字符串容易出现格式转义错误，建议直接通过PHP数组构造返回结构，由json_encode函数统一处理格式：

$response = [];
while ($row = $result->fetch_assoc()) {
  $response[] = [
    "id" => $row['id'],
    "text" => $row['text']
  ];
}

// 直接输出标准结构即可，无需手动拼接JSON字符串
echo json_encode([
  "results" => $response
]);

修改完成后清空浏览器缓存重试，下拉选项即可正常渲染，slice类型错误会直接消失。

内容的提问来源于stack exchange，提问作者FiliP