Extract Spalten aus einem JSON-Objekt in ein Array

Question

Zu diesem Zeitpunkt Ich programmiere eine Web-basierte Benutzeroberfläche für eine autonome Anlage-Box (nichts Verbrecher :))

Wir haben eine SPS-basierte Steuerung, die protokolliert periodisch Temperatur- und Luftfeuchtigkeitsdaten in eine SQL-Datenbank.

Ich schrieb ein kleines PHP-Skript, das einige der letzten Zeilen abruft und es mir als Array zurückgibt. So weit, so gut, ich konnte diese Daten noch mit einer $.getJSON() in meine HTML-Seite bekommen. Ich weiß, das ist veraltet, ich sollte besser eine Ajax-Funktion verwenden, aber das ist im Moment nicht das Problem.

Mein PHP-Skript gibt ein Array im 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"} 
] 

Jetzt möchte ich nur einige der Spalten in einzelne Arrays extrahieren. Es sollte wie folgt aussehen:

Jede Spalte, die d. H. Das Tag "Datum" hat, sollte in einem Array sein, jedes "Zeit" -Tag und so weiter.

Ziel ist es, ein Chartsjs Liniendiagramm zu erstellen, das mir die Temperatur und die Feuchtigkeit für eine feste Zeit zeigt.

Was ich bisher versucht habe:

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

aber dieses nicht mir das Ergebnis bekommen ich will. vielleicht kann mir jemand helfen oder mich zur rechts beantworteten Frage bringen, weil ich im Internet nicht so etwas wie mein Problem gefunden habe.

Am Ende es soll wie folgt aussehen:

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

und so weiter.

Answer 1

Die einfachste Antwort ist, dass Sie nicht valuedata wollte (was die ursprüngliche Array war)

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

Answer 2

Sie im Grunde eine Funktion möchten, die eine bestimmte Eigenschaft Wert aus einem Array von Objekten ausreißen kann.

Wir können diese Funktion "pluck" nennen (einige Utility-Bibliotheken nennen es genau dasselbe, see). Es ist sehr einfach:

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

Es stellt sich ein Array von Objekten in ein Array von Eigenschaftswerten. Der Vorgang, ein Array von etwas in ein Array von etwas anderem zu verwandeln, wird gemeinhin als "Map" bezeichnet und "Zupfen" ist lediglich ein spezieller Typ einer "Map" -Operation. Hier verwenden wir die eingebaute Funktion von jQuery, aber jetzt gibt es auch JS-native Array#map, wenn Sie möchten, können Sie diese stattdessen verwenden.

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

Jetzt können wir diese Funktion verwenden, um Wert Serien wie feucht_innen aus Ihren Basisdaten zu extrahieren. ChartJS zieht seine Daten-Set-Definitionen in diesem Format:

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

Der Rest wird immer ChartJS schön zu sehen, die over here zu sehen ist.

Ihre verbleibende Aufgabe ist dies mit Ajax-Aufruf zu integrieren und ein besseres Datum/Zeit-Übertragungsformat zu finden. Ich überlasse das als Übung für Sie.