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 i.e. 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.

You just write but this doesnt get me the result i want. but it is not clear what the desired result is. Please explain what you expect how it should look like and how this differes from you current result. — t.niese
– t.niese, Commented Dec 13, 2016 at 17:36
var Date [1: date1, 2: date2,..., n: date n] - this is not a valid array, but it would be better to construct a plain array like var dateItems = [date1, date2,..., date n] — RomanPerekhrest
– RomanPerekhrest, Commented Dec 13, 2016 at 17:38

Tomalak · Accepted Answer · 2016-12-13 18:41:34Z

2

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.

edited Dec 13, 2016 at 18:41

answered Dec 13, 2016 at 18:34

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MrSliff Over a year ago

A Bit late, but thank you for this. I will try to use it as suggested. Looks like its less work than my solution is.

Brian Wiley Over a year ago

there's no quick one liner for this? I mean if you can log it with a line like phpAjaxArray.forEach(({a}) => console.log(a)); you should be able to get that into an array instead of logging it.

Tomalak Over a year ago

@BrianWiley Not sure what you mean. You can rewrite the function I provided to fit on one line if you must. Using fat arrow functions and ES6 array methods it becomes pretty short.

Jamiec · Accepted Answer · 2016-12-13 17:40:36Z

0

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

answered Dec 13, 2016 at 17:40

Jamiec

136k15 gold badges143 silver badges202 bronze badges

1 Comment

MrSliff Over a year ago

Thanks that was the problem. I'll have to take a look on using the right data provided in my functions. Using "data" when "value" is provided cant work.

Collectives™ on Stack Overflow

Extract columns from a JSON-Object into an Array

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related