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