Objet jQuery de la table html en deux tableaux unidimensionnels pour la carte chartiste

Question

Cela peut être si simple que vous pouvez trouver ça idiot, mais je suis perplexe. Je bidouille autour avec du code de jQuery qui devrait extraire des données d'une table HTML de 2 colonnes et cracher alors deux tableaux unidimensionnels. Par exemple. ['échantillon 1', 'échantillon 2', 'échantillon 3' ...] pour les étiquettes à barres, et par exemple [645, 872, 423 ...] pour les valeurs de barres dans un graphique Chartist.

EDIT: J'ai découvert plus tard que le tableau "série" devrait être bidimensionnel pour permettre à plus de jeux de données d'être présentés dans le même tableau. Si vous utilisez un seul jeu de données "série", placez des parenthèses autour de celui-ci pour le transformer en tableau dans un tableau.

J'ai réussi à obtenir les valeurs de la table HTML dans un objet jQuery comme ceci:

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

... où myTable est une table HTML comme:

<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> 

Le problème est que je ne peux pas obtenir la première colonne (sous "Oxides") et les valeurs de la deuxième colonne (sous "Proportion") dans leur propre tableau unidimensionnel pour alimenter Chartist, qui en a besoin:

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

J'ai fait une JSfiddle où vous pouvez voir la sortie du tableau par 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 

Il semble que d'une certaine manière ces objets sont multidimensionnels ou il y a un certain funkiness jQuery se passe, parce que je ne l'ai pas réussi à extraire les tableaux "labels" et "series" unidimensionnels pour Chartist. Il devrait être mort simple, cependant?

Answer 1

Il semble que vous ayez les données en arrière. Vous stockez un tableau d'objets, par opposition à un objet avec 2 tableaux.

Je mets à jour le violon avec un exemple qui crée l'objet "data" que vous utiliseriez pour Chartist.

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

Si vous avez besoin d'être dynamique, il y aurait besoin d'être d'autres changements. Mais, cela fonctionnerait si vous cherchez uniquement à capturer des données d'étiquettes/de séries à une dimension.