Select2远程数据属性取值问题：无法读取未定义的属性

问题原因 #

你遇到的错误是因为对API返回的JSON结构理解有误，导致遍历和字段访问路径错误：

• Teleport城市API返回的JSON中，搜索结果数组是data._embedded['city:search-results']，而非直接遍历整个data对象
• 数组中的每个元素本身就是包含matching_full_name的结果项，不需要再通过item._embedded访问

修正后的代码 #

将processResults函数修改为以下内容即可解决问题：

$('.select2-cities').select2({
  ajax: {
    url: 'https://api.teleport.org/api/cities/',
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        search: params.term, // search term
        page: params.page
      };
    },

    processResults: function(data) {
      // 遍历正确的结果数组
      return {
        results: $.map(data._embedded['city:search-results'], function(item) {
          return {
            text: item.matching_full_name,
            id: item.matching_full_name,
          }
        })
      };
    },

    cache: true
  },
  placeholder: 'Search for a city',
  minimumInputLength: 1,
});

关键修改点 #

• 把$.map(data, ...)改为$.map(data._embedded['city:search-results'], ...)，确保遍历的是实际的搜索结果数组
• 直接使用item.matching_full_name获取目标字段，无需额外嵌套访问_embedded

这样修改后，Select2就能正确解析API返回的数据，生成对应的选择选项，不会再出现未定义属性的警告。

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