使用Select2插件读取JSON文件 [英] JSON file read with Select2 plugin

问题描述

我有这个JSON文件(已截断):

I have this JSON file (truncated):

{
    "** 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和详细信息.

When I search for Jamies Best Ever Christmas I want it to return the name and the respective tvdb_id and details.

在我上面的代码中，您可以看到console.log(this.title);.这是错误的，因为JSON对象中没有title:值.如何使它工作并检索数据?

In my above code you can see console.log(this.title);. This is wrong, because there is no title: value inside the JSON object. How can I get this to work and retrieve data?

演示: http://jsfiddle.net/6pGFC/(使用第一个输入字段获取自动填充，不是第二)

Demo: http://jsfiddle.net/6pGFC/ (use first input field to get autocomplete, not second)

非常感谢！

推荐答案

您的示例中有两个问题.

There are a couple of issues in your example.

1. 您的保管箱文件不是JSONP.它是JSON. (所以jquery无法解析它)
2. 由于要遍历对象而不是使用$.each遍历数组，因此传递给函数的参数是key和value，因此在您的情况下，i是键. (请参见 https://api.jquery.com/jQuery.each/ )

1. You dropbox file is not JSONP. It is JSON. (so jquery cannot parse it)
2. Since you are iterating over an object and not over an array with $.each the arguments passed to the function are key and value, so in your case the i is the key. (see https://api.jquery.com/jQuery.each/)

通常，搜索应在服务器端进行，而不是在客户端上进行(尤其是5mb文件)

In general the searching should happen in the server side, and not on the client (especially for 5mb files)

以下是已解决上述两个问题的演示(我已将更正的文件重新上传到我的保管箱).

Here is demo that has fixed (i have re-uploaded the corrected file to my dropbox) the above two problems http://jsfiddle.net/6pGFC/3/
(too slow though since it tries to display all the json)

这篇关于使用Select2插件读取JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！