循环遍历图表.js输入的数组

Question

如何循环浏览chartObject图表.js的javascript数组数据？ 当我引用各个元素时，我有这个工作，即chartObject[0][0]但我无法使用循环来工作。

<script>
const requestURL =
url;
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();
request.onreadystatechange = function() {
if (request.readyState === 4) {
doWithResponse(request.response);
}
};
function doWithResponse(chart) {
var chartObject = JSON.parse(chart)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [
chartObject[0][0],
chartObject[0][1],
chartObject[0][2],
chartObject[0][3],
chartObject[0][4],
chartObject[0][5],
chartObject[0][6],
chartObject[0][7],
chartObject[0][8],
chartObject[0][9]
],
datasets: [
{
label: "Frequency",
data: [
chartObject[1][0],
chartObject[1][1],
chartObject[1][2],
chartObject[1][3],
chartObject[1][4],
chartObject[1][5],
chartObject[1][6],
chartObject[1][7],
chartObject[1][8],
chartObject[1][9]
],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)"
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)"
],
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
},
title: {
display: true,
text: 'Test Count'
}
});
}
</script>

Answer 1

这里你不需要任何循环，你只需要从createObject的特定索引中获取值，但由于chartObject是对象，所以你需要在传递数据时制作一个副本才能具有不可变性，这样你就可以使用...或slice或map来拥有副本

您可以简单地使用... spread syntax，

data : {
labels : [...chartObject[0]],
datasets: [{
label: 'frequency',
data: [...chartObject[1]],
...
}]
}

如果您确定传递给 Chart 的值不会改变原始状态，则可以直接将它们作为

data : {
labels : chartObject[0],
datasets: [{
label: 'frequency',
data: chartObject[1],
...
}]
}

Answer 2

您可以使用Array.prototype.map：

labels: chartObject[0].map((x, i) => chartObject[0][i]), 
datasets: [{
label: "Frequency",
data: chartObject[1].map((x, i) => chartObject[1][i])
}]