Extract columns from a JSON-Object into an Array

Question

At this time I'm programming a web based user interface for an autonomous plant-box (nothing criminal :) )

We have a SPS-Based controller which logs periodically temperature and humidity data into a SQL-database.

I wrote a small PHP script which retrieves some of the most recent rows and gives it back to me as an array. So far so good, I've been able yet to get this data into my HTML page with a $.getJSON() . I know that's outdated, I should better use an ajax function, but that's not the problem at the moment.

My PHP script returns an array in JSON format:

[
    {"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"}
]

Now I just want to extract some of the columns into single arrays. It should look like this:

Every column which has ie the tag "datum" should be in one array, every "time" tag and so on.

Goal is to make a chartjs line chart which shows me the temperature and humidity for a fixed time.

What I've tried so far:

$.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));
    });
});

but this doesnt get me the result I want. maybe someone can help me or take me to the right answered question here, because I didnt find something similar to my problem in the internet.

In the end it should look like this:

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

and so on.

Answer 1

You basically want a function that can pluck out a certain property value from an array of objects.

We can call this function "pluck" (some utility libraries call it exactly the same, see ). It's very simple:

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

It turns an array of objects into an array of property values. The process of turning an array of something into an array of something else is commonly called "map" and "pluck" is merely a special type of a "map" operation. Here we use jQuery's built in function, but by now there is JS-native Array#map available as well, if you want you can use that instead.

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

Now we can use this function to extract value series like feucht_innen from your base data. ChartJS prefers its dataset definitions in this format:

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

The rest is getting ChartJS to look nice, which can be seen over here .

Your remaining task is to integrate this with your Ajax call and to find a better date/time transfer format. I'll leave that as an exercise to you.

Answer 2

The simplest answer is you wanted value not data (which was the original array)

$.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));
   });