如何将JSP中EL渲染的数值转为JavaScript数组供Chart.js使用

• HTML规范要求id属性全局唯一。在<c:forEach>循环中给每个<li>绑定相同的id="values"时，document.getElementById("values")只会匹配DOM树中第一个带该id的元素，因此始终只能拿到第一个数值。
• 从DOM读取的文本值无需经过额外的toString转换，统一做数值解析即可满足Chart.js的参数要求。

方案一：调整DOM选择规则，读取全部渲染值 #

先修改JSP渲染代码，将重复的id替换为通用类名：

<ul>
    <c:forEach var="i" items="${arrayM}">
        <li class="chart-num">${i.getNumber()}</li>
    </c:forEach>
</ul>

编写JS逻辑收集所有类名匹配的元素值，生成数字数组：

// 匹配所有带chart-num类的列表项
const numNodes = document.querySelectorAll('.chart-num');
// 遍历节点，读取文本内容并转为整数，生成符合要求的数组
const chartData = Array.from(numNodes, node => parseInt(node.textContent.trim()));

// 直接传入Chart.js配置即可
const chartConfig = {
    data: {
        datasets: [{
            data: chartData // 输出结构为 [4, 5, 7]
        }]
    }
}

方案二：直接在JSP中生成JS数组，绕开DOM读取 #

该方案无DOM读取开销，也不会因为页面结构变动出现读取失效的问题，直接利用JSTL生成合法的JS数组：

<script>
    const chartData = [
        <c:forEach var="item" items="${arrayM}" varStatus="status">
            ${item.getNumber()}<c:if test="${!status.last}">,</c:if>
        </c:forEach>
    ];
</script>

页面渲染完成后，生成的JS代码为合法的纯数字数组结构const chartData = [4,5,7];，可直接传入Chart.js的对应配置项，无需额外做字符串解析、类型转换操作。

内容的提问来源于stack exchange，提问作者yungCoder