javascript - 使用 Select2 插件读取 JSON 文件

Question

我有这个 JSON 文件(已 chop ):

{
    "** Please contact a mod by posting on the forums **": {
        "tvdb_id": "257937",
        "last_updated": 1341780286,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/17288.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/17288.jpg"
        }
    },
    "Jamies Best Ever Christmas": {
        "tvdb_id": "214161",
        "last_updated": 1329701153,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/9126.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/9126.jpg"
        }
    },
    "Kuromajo-san ga Tooru!!": {
        "tvdb_id": "257914",
        "last_updated": 1395775431,
        "images": {
            "poster": "http://zapp.trakt.us/images/posters/15640.jpg",
            "fanart": "http://zapp.trakt.us/images/fanart/15640.jpg"
        }
    }
}

和这段代码:

$(".tvshow").select2({
  placeholder: "Type in a TV show",
  multiple: true,
  maximumSelectionSize: 1,
  minimumInputLength: 2,
  maximumInputLength: 20,
  query: function(query) {
    var data = {results: []};
    var value = $(".select2-input").val();
    $.ajax ({
      type: "GET",
      url: 'shows.json',
      dataType: "jsonp",
      json: "callbackname",
      crossDomain : true,
      success: function (result) {
        $.each(result, function (i, show) {
          // write everything in an array
          data.results.push({id: this.tvdb_id, text: this.title, poster: this.images.poster, bg: this.fanart });
          console.log(this.title);
          selectedTVshow = this.title;
          // results = data.results;

          // return array
          query.callback(data);
        })
      },
      error: function (data) {
        // console.log('error');
      }
    })
  }
})

当我搜索 Jamies Best Ever Christmas 时，我希望它返回名称以及相应的 tvdb_id 和详细信息。

在我上面的代码中，您可以看到console.log(this.title);。这是错误的，因为 JSON 对象内没有 title: 值。我怎样才能让它工作并检索数据？

演示:http://jsfiddle.net/6pGFC/ (使用第一个输入字段来获得自动完成功能，而不是第二个)

非常感谢!

Answer 1

您的示例中有几个问题。

1. 您的 Dropbox 文件不是 JSONP。它是 JSON。 (所以 jquery 无法解析它)
2. 由于您使用 $.each 迭代对象而不是数组，因此传递给函数的参数为​​ key 和 value ，所以在你的情况下 i 是关键。 (参见 https://api.jquery.com/jQuery.each/ )

一般来说，搜索应该发生在服务器端，而不是客户端(特别是对于 5mb 文件)

这里是修复了上述两个问题的演示(我已将更正后的文件重新上传到我的保管箱)http://jsfiddle.net/6pGFC/3/
(太慢了，因为它尝试显示所有 json)