使用Select2插件读取JSON文件

时间:2014-04-01 22:06:38

标签: javascript jquery json

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

{
    "** 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/(使用第一个输入字段获取自动完成,而不是第二个)

非常感谢!

2 个答案:

答案 0 :(得分:1)

看起来您想要执行映射操作以将数据转换为更易于使用的内容。 Underscore.js是一个很棒的工具。

var mappedResults = _.map(result, function(key, value, list) {
    return {name:key, tvdb_id:value.tvdb_id};
});

这将转变为:

{
    "** 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"
        }
    }
}

......进入这个:

[
    {name:"** Please contact a mod by posting on the forums **", tvdb_id:"257937"},
    {name:"Jamies Best Christmas", tvdb_id:"21461"},
    {name:"Kuromajo-san ga Tooru!!", tvdb_id:"257914"}
]

完成后,您可以按照以下方式对其进行过滤:

function getMatchingIds(searchterm) {
    return _.filter(mappedResults, function(entry) {
        return (entry.name.indexOf(searchterm) != -1);
    }
}

我还应该补充一点,jQuery有自己的$.map功能,可以做类似的事情。

答案 1 :(得分:1)

您的示例中有几个问题。

  1. 您的Dropbox文件不是JSONP。这是JSON。 (所以jquery无法解析它
  2. 由于您正在迭代一个对象而不是一个$.each的数组,因此传递给该函数的参数是keyvalue,因此在您的情况下i是关键。 (参见https://api.jquery.com/jQuery.each/
  3. 一般来说,搜索应该在服务器端进行,而不是在客户端进行(尤其是对于5mb文件

    这是已修复的演示(我已将更正的文件重新上传到我的Dropbox )以上两个问题http://jsfiddle.net/6pGFC/3/
    太慢了,因为它试图显示所有的json