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

在ajax调用之后得到success响应时，您可以简单地使用Array.reduce来更改json结构，并将数据传递给下一个函数。

您需要注意的一件事是首先使用JSON将javascript array/object数据转换为JSON.parse(data)。

＆＃13;

let data = [
  {"animal_type":"dog", "name":"spike", "age":"7"},
  {"animal_type":"cat", "name":"tom", "age":"1"}
];

data = data.reduce((acc, curr) => {
  let obj = {};
  obj.pet_name = curr.name;
  obj.animal = curr.animal_type;
  acc.push(obj);
  return acc;
}, []);

console.log(data);

＆＃13;

Answer 2

您需要使用$.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/

过滤远程JSON文件，然后将其提供给插件

2 个答案: