在将远程 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/

Answer 2

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

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

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);