javascript - 在将远程 JSON 文件提供给插件之前过滤它

Question

我在 s3 上存储了一个远程 JSON 文件，其格式如下:

[
  {"animal_type":"dog", "name":"spike", "age":"7"},
  {"animal_type":"cat", "name":"tom", "age":"1"}
  // and so on
]

数据没有特定的顺序。

我正在使用 Handsontable 插件将数据显示为电子表格。我的代码现在看起来像这样:

$.ajax({
  type: 'GET',
  url: 'http://s3.aws.com/url.json',
  dataType: 'JSON',
  crossDomain: true,
  success: function(data) {
    new Handsontable($('#data-grid')[0], {
      data: data,
      rowHeaders: true,
      colHeaders: true
    });
  }

我想做

• 只获取某些 JSON 字段

和

• 按一定顺序显示它们

基本上，我希望它看起来像这样，而不是上面的数据:

[
  {"pet_name":"spike", "animal":"dog"},
  {"pet_name":"tom", "animal":"cat"}
  // and so on
]

我知道我需要遍历我的 data 对象并执行如下操作:

var new_data = $.each(data, function(i, item){
  // do stuff
});

但在这种情况下，我对如何重新实例化 JSON 对象有点迷茫。

Answer 1

您需要像这样使用 $.map 函数:

var new_data = $.map(data, function(i, item) {
    return {"pet_name":item['name'], "animal":item['animal_type'] };
});

http://api.jquery.com/jquery.map/

更新:

您可以像这样配置值的重新映射:

var data = [
    {"animal_type":"dog", "name":"spike", "age":"7"},
    {"animal_type":"cat", "name":"tom", "age":"1"}
    // and so on
];

var columns = {
    "name": "pet_name",
    "animal_type": "animal"
};

var new_data = $.map(data, function(item, i) {
    var value = {};
    $.each(item, function(propName, obj) {
        value[columns[propName]] = obj;
    });
    return value;
});

console.log(new_data);

工作示例:https://jsfiddle.net/thinkingmedia/5p0c55e5/

如果您要在 JavaScript 中做很多这样的工作。有些库提供比 jQuery 的集合函数更广泛的功能。

https://lodash.com/