過濾遠程JSON文件將其送入一個插件

之前我有存儲在S3遠程JSON文件，該文件具有以下格式：過濾遠程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對象有點遺憾。

來源

2017-08-23 The Whiz of Oz

如果可能的話，這將是更值得的，如果你能做到這一點的服務器上。在客戶端上過濾仍然意味着您必須首先下載*整個*數據集，然後執行其上的任何邏輯，這要慢得多。另請注意，訂購對象的屬性是沒有實際意義的，它們不保證按順序保留。 –

@RoryMcCrossan由它的外觀，它在S3上，所以過濾服務器端將不可能。 – Deckerz

@RoryMcCrossan慢什麼？一兩毫秒。你假設後處理JSON會以某種方式被用戶注意到。 – cgTag

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

來源

2017-08-23 14:06:28 cgTag

我認爲這是我需要的，謝謝你的回答。你可能會稍微擴展一些代碼，因爲在我真正開始迭代之前，我可能會有一個預設的所需列數組？例如'required_columns = ['name'，'animal_type']' –

@TheWhizofOz已更新。 – cgTag

謝謝你，特別是lodash的參考。 –

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

來源

2017-08-23 14:03:45

我不會將簡化函數歸類爲對JavaScript不熟悉的人。 – cgTag

這是個人觀點@cgTag。 SO是爲了幫助解決問題而不是新的，提出問題的人也應該努力更新他的知識，我猜。 –

非常真實！我+1你的答案作爲另一種可能的方法。我不應該批評。抱歉。 – cgTag

過濾遠程JSON文件將其送入一個插件

回答

相關問題