jQuery 对象从 html table 到图表图表的两个一维数组

Question

这可能太简单了，您可能会觉得它很傻，但我很难过。我正在摆弄一些 jQuery 代码，这些代码应该从 2 列 HTML table 中提取数据，然后吐出两个一维数组。例如。 ['sample 1','sample 2', 'sample 3'...] 用于条形标签，例如 [645, 872, 423...] 用于 Chartist 中的条形值图表。

编辑：我后来发现 "series" 数组应该是二维的，以允许在同一图表中显示更多数据集。如果仅使用一个 "series" 数据集，请将其括起来以将其变成数组中的数组。

我已经设法将 HTML table 值放入 jQuery 对象中，如下所示：

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

...其中 myTable 是 HTML table，例如：

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

问题是我无法将第一列（在 "Oxides" 下）和第二列值（在 "Proportion" 下）放入它们自己的一维数组中以输入 Chartist，基本上需要这个：

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

我做了一个JSfiddle，你可以通过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

似乎这些对象在某种程度上是多维的，或者有一些 jQuery funkiness 正在发生，因为我还没有设法提取一维 "labels" 和 "series" 数组宪章主义者。不过它应该非常简单？

Answer 1

看起来你的数据可能倒退了。您正在存储一个对象数组，而不是一个包含 2 个数组的对象。

我用一个示例更新了 fiddle，该示例创建了您将用于 Chartist 的 "data" 对象。

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

如果您需要它是动态的，则需要进行其他更改。但是，如果您只想捕获一维 label/series 数据，这会起作用。

jQuery 对象从 html table 到图表图表的两个一维数组

jQuery object from html table into two one-dimensional arrays for Chartist chart

javascript

arrays

oop

jquery

chartist.js