將JSON對象中的列提取到數組中

Question

目前，我正在為自主植物箱編程基於Web的用戶界面（無需犯罪：））

我們有一個基於SPS的控制器，該控制器定期將溫度和濕度數據記錄到SQL數據庫中。

我寫了一個小的PHP腳本，它檢索一些最新的行並將其作為數組返回給我。 到目前為止，到目前為止，我還無法通過$.getJSON()將這些數據放入HTML頁面。 我知道這已經過時了，我應該最好使用ajax函數，但是目前這不是問題。

我的PHP腳本返回JSON格式的數組：

[
    {"id":"321","datum":"12.12.2016","time":"19:12","temp_innen":"19.8","feucht_innen":"51.7"},
    {"id":"322","datum":"12.12.2016","time":"19:22","temp_innen":"19.8","feucht_innen":"51.7"},
    {"id":"323","datum":"12.12.2016","time":"19:32","temp_innen":"19.8","feucht_innen":"51.7"},
    {"id":"324","datum":"12.12.2016","time":"19:42","temp_innen":"19.8","feucht_innen":"51.7"},
    {"id":"325","datum":"12.12.2016","time":"19:52","temp_innen":"19.8","feucht_innen":"51.6"},
    {"id":"326","datum":"12.12.2016","time":"20:02","temp_innen":"19.8","feucht_innen":"51.6"},
    {"id":"327","datum":"12.12.2016","time":"20:12","temp_innen":"19.8","feucht_innen":"51.5"},
    {"id":"328","datum":"12.12.2016","time":"20:22","temp_innen":"19.8","feucht_innen":"51.6"},
    {"id":"329","datum":"12.12.2016","time":"20:32","temp_innen":"19.8","feucht_innen":"51.4"},
    {"id":"330","datum":"12.12.2016","time":"20:42","temp_innen":"19.8","feucht_innen":"51.4"},
    {"id":"331","datum":"12.12.2016","time":"20:52","temp_innen":"19.8","feucht_innen":"51.4"},
    {"id":"332","datum":"12.12.2016","time":"21:02","temp_innen":"19.8","feucht_innen":"51.4"}
]

現在，我只想將某些列提取到單個數組中。 它看起來應該像這樣：

帶有標簽“基准”的每一列都應位於一個數組中，每個“時間”標簽均應位於一個數組中，依此類推。

目標是制作一個chartjs折線圖，向我顯示固定時間的溫度和濕度。

到目前為止，我已經嘗試過：

$.getJSON( "/php/logabfrage.php", function(data) {
    var Datum = [], Zeit = [], Temp = [], Hum = [];

    $.each(data, function(index, value) {
        Datum.push(new Date(data.datum));
        Zeit.push(new Date(data.zeit));
        Temp.push(parseFloat(data.temp_innen));
        Hum.push(parseFloat(data.feucht_innen));
    });
});

但這並沒有給我我想要的結果。 也許有人可以幫助我，或者帶我到正確的答案這里，因為我沒有在互聯網上找到與我的問題類似的東西。

最后應該看起來像這樣：

var date = [date1, date2, ..., dateN];
var temp = [temp1, temp2, ..., tempN];

等等。

Answer 1

基本上，您需要一個可以從對象數組中提取特定屬性值的函數。

我們可以將這個函數稱為“ pluck”（某些實用程序庫將其稱為完全相同， 請參見參考資料 ）。 很簡單：

function pluck(arr, property) {
    return $.map(arr, function (item) {
        return item[property];
    });
}

它將對象數組變成屬性值數組。 將一個數組轉換為另一個數組的過程通常稱為“ map”，而“ pluck”僅僅是“ map”操作的一種特殊類型。 在這里，我們使用jQuery的內置函數，但是到目前為止，如果您願意，也可以使用JS原生Array＃map 。

var a = pluck([{a: 1, b: 2}, {a: 3, b: 4}], "a");
// -> [1, 3]

現在，我們可以使用此函數從基礎數據中提取諸如feucht_innen值序列。 ChartJS傾向於以下格式的數據集定義：

[{
    data: pluck(response, "temp_innen"),
    label: "Temperatur innen"
},{
    data: pluck(response, "feucht_innen"),
    label: "Feuchtigkeit innen"
}]

剩下的就是讓ChartJS看起來不錯，可以在這里看到。

您剩下的任務是將其與Ajax調用集成在一起，並找到更好的日期/時間傳輸格式。 我將其留給您練習。

Answer 2

最簡單的答案是您要value而不是data （這是原始數組）

$.each(data, function(index, value) {                  
       Datum.push(new Date(value.datum));
       Zeit.push(new Date(value.zeit));
       Temp.push(parseFloat(value.temp_innen));
       Hum.push(parseFloat(value.feucht_innen));
   });