jQuery-Objekt von HTML-Tabelle in zwei eindimensionale Arrays für Chartist-Diagramm

Question

Dies kann so einfach sein, dass Sie es vielleicht albern finden, aber ich bin ratlos. Ich fummle mit irgendeinem jQuery-Code herum, der Daten aus einer zweispaltigen HTML-Tabelle extrahieren und dann zwei eindimensionale Arrays ausspucken sollte. Z.B. ['Probe 1', 'Probe 2', 'Probe 3' ...] für die Bar-Tags und z.B. [645, 872, 423 ...] für die Bar-Werte in einem Chartist Diagramm.

EDIT: Ich entdeckte später, dass die "Serie" -Array sollte zweidimensional sein, damit mehr Datensätze in der gleichen Grafik dargestellt werden. Wenn Sie nur ein "Serien" -Dataset verwenden, setzen Sie Klammern, um es in ein Array innerhalb eines Arrays zu verwandeln.

Ich habe es geschafft, wie dies die HTML-Tabellenwerte in ein jQuery-Objekt zu erhalten:

var tdata = []; 
var headers = []; 
$('#myTable th').each(function(index, item) { 
headers[index] = $(item).html(); 
}); 
$('#myTable tr').has('td').each(function() { 
var tdataItem = {}; 
$('td', $(this)).each(function(index, item) { 
    tdataItem[headers[index]] = $(item).html(); 
}); 
tdata.push(tdataItem); 
}); 

... wo myTable wie eine HTML-Tabelle ist:

<table id="myTable"> 
<tbody><tr> 
<th>Oxide</th> 
<th>Proportion</th> 
</tr> 
<tr> 
<td>Ca0</td> 
<td>0.73</td> 
</tr> 
<tr> 
<td>Li2O</td> 
<td>0</td> 
</tr> 
<tr> 
<td>MgO</td> 
<td>0.13</td> 
</tr> 
</tbody></table> 

Das Problem ist, dass ich die erste Spalte (unter "Oxide") und die zweiten Spaltenwerte (unter "Proportion") nicht in ihr eigenes eindimensionales Array einspeisen kann, das Chartist benötigt:

var data = { 
    labels: ['CaO', 'Li2O', 'MgO'], 
    series: [0.73, 0, 0.13] 
    ] 
}; 

machte ich eine JSfiddle wo Sie die Ausgabe des Arrays durch console.log(tdata);

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
0: 
Object 
Oxide: 
"Ca0" 
Proportion: 
"0.73" 
__proto__: 
Object 

sehen Es scheint, dass irgendwie diese Objekte sind mehrdimensional oder es gibt einige jQuery funkiness los, weil ich nicht zu extrahieren haben es geschafft, die eindimensionalen "labels" und "series" -Arrays für Chartist. Es sollte jedoch tot einfach sein?

Answer 1

Es sieht so aus, als könnten Sie die Daten rückwärts haben. Sie speichern ein Array von Objekten im Vergleich zu einem Objekt mit 2 Arrays.

Ich aktualisiere die Geige mit einem Beispiel, das das "Daten" -Objekt erstellt, das Sie für Chartist verwenden würden.

https://jsfiddle.net/t539uuok/1/

var data = { 
    labels: [], 
    series: [] 
}; 
$("#myTable tr").has("td").each(function() { 
    data.labels.push($(this).find("td:first").html()); 
    data.series.push($(this).find("td:last").html()); 
}); 

Wenn Sie es dynamisch sein müssen, wäre es müssen andere Veränderungen. Dies würde jedoch funktionieren, wenn Sie nur 1-dimensionale Label/Series-Daten erfassen möchten.