如何在forEach循环中获得对象的索引?

Question

我尝试从数据库中获取一些数据并在图表中显示，但我有问题正确显示它。我希望x值是所获取数据的索引

async function getBatteryset() {
let url = '/getBatLevel.php';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderBattData() {
let dataset = await getBatteryset();
let html = '<figure class="css-chart" style="--widget-size:650px;"><ul class="line-chart">';
dataset.forEach(data => {
let htmlSegment = `<li>
<div class="data-point" data-value=${data.ID} style="bottom: ${data.BatV*100}px; left: ${data}px"></div>
</li>`;
html += htmlSegment;
});
html += '</ul></figure>'
let container = document.querySelector('.BattChart');
container.innerHTML = html;
}

Answer 1

也许可以这样做:

dataset.forEach((data, i) => {
const offset = 100 // choose an offset here for each element on the X axis

let htmlSegment = 
`<li>
<div class="data-point" data-value=${data.ID} style="bottom: ${data.BatV*100}px; left: ${i * offset}px"></div>
</li>`;
html += htmlSegment;
});

还请注意，如果数据来自web服务，您的代码可能容易受到基于DOM的XSS的攻击。

Answer 2

您可以更好地使用map。map和forEach都将索引作为第二个参数

let html = `<figure class="css-chart" style="--widget-size:650px;"><ul class="line-chart">
$(dataset.map((data,i) => `<li>
<div class="data-point" data-value=${data.ID} style="bottom: ${data.BatV*100}px; left: ${i * offset}px"></div>
</li>`).join("")}
</ul></figure>`;