Express Handlebars循环渲染仅首个条目计算正常，其余空白求助

1. 重复请求+变量污染：你在每个循环条目里都生成独立脚本，不仅重复请求Bluelytics API（浪费资源还可能触发频率限制），还重复定义importe、dolarblue等变量，没有块级作用域隔离，后续脚本会覆盖前面的变量值，导致计算逻辑混乱。
2. 同步请求阻塞：如果你的get_data是同步XMLHttpRequest实现，第一个请求会阻塞后续脚本执行，后面的条目根本没机会完成计算。
3. DOM元素id重复：所有行的total单元格id都是total，违反HTML中id唯一的规则，后续操作会出现不可预期的问题。

把API请求和计算逻辑统一放在循环外，仅请求一次汇率，再批量处理所有条目：

修改后的Handlebars模板 #

{{#each servicios}}
<tr>
    <td>{{servicioID}}</td>
    <td>{{descripcion}}</td>
    <td>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="check-{{servicioID}}">
            <label class="form-check-label" for="check-{{servicioID}}"></label>
        </div>
    </td>
    <!-- 用data属性存储preciousd值，方便JS读取 -->
    <td id="importe{{servicioID}}" data-preciousd="{{preciousd}}"></td>
    <!-- 给total单元格设置唯一id -->
    <td id="total-{{servicioID}}"></td>
</tr>
{{/each}}

<!-- 统一处理汇率计算的脚本，放在循环外部 -->
<script>
// 用原生fetch异步请求汇率，仅请求一次
fetch('https://api.bluelytics.com.ar/v2/latest')
    .then(res => res.json())
    .then(data => {
        const dolarBlueBuy = data.blue.value_buy;
        // 遍历所有带有preciousd数据的单元格
        document.querySelectorAll('[data-preciousd]').forEach(cell => {
            const preciousd = parseFloat(cell.dataset.preciousd);
            // 计算并渲染结果
            cell.textContent = preciousd * dolarBlueBuy;
        });
    })
    .catch(err => console.error('获取汇率失败:', err));
</script>

关键优化点 #

• 单次API请求：避免重复请求，提升性能并减少服务器压力。
• 异步处理：用fetch替代同步请求，不会阻塞页面渲染和后续脚本执行。
• 数据属性传递：通过data-preciousd存储数值，无需在脚本中硬编码，逻辑更清晰。
• 唯一id修正：给每个total单元格设置唯一id，符合HTML规范。

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