将JSON-Object中的列提取到数组中

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”（某些实用程序库将其称为完全相同，see）。这很简单：

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看起来很漂亮，可以看到over here。

您剩下的任务是将其与您的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));
   });