Question

我有这个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/（使用第一个输入字段获取自动完成，而不是第二个）

非常感谢！

Answer 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功能，可以做类似的事情。

Answer 2

您的示例中有几个问题。

您的Dropbox文件不是JSONP。这是JSON。（所以jquery无法解析它）
由于您正在迭代一个对象而不是一个$.each的数组，因此传递给该函数的参数是key和value，因此在您的情况下i是关键。（参见https://api.jquery.com/jQuery.each/ ）

一般来说，搜索应该在服务器端进行，而不是在客户端进行（尤其是对于5mb文件）

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

使用Select2插件读取JSON文件

2 个答案: