Thymeleaf中用JS变量索引访问后端数组数据失败求助

你碰到的核心问题是Thymeleaf的执行时机和JavaScript完全不同：Thymeleaf是在服务器端渲染页面时解析表达式，而你的counter、i这些变量是在浏览器端运行JavaScript时才存在的。服务器渲染页面的时候，这些JS变量还没诞生，Thymeleaf自然没法识别[[${setProducts[counter].price}]]这种写法，最终只会生成空内容。

这里提供两种最常用的解决思路，你可以根据场景选择：

方案1：把服务端数据转成JSON对象交给JS处理 #

这是最灵活的方式，直接把products.special整个集合转换成JS能识别的JSON数组，之后所有的遍历、索引操作都在客户端JS里完成，完全脱离Thymeleaf的限制。

<script th:inline="javascript">
  // 用Thymeleaf把服务端集合转成JS JSON对象，注释里的表达式会被服务器替换成真实的JSON字符串
  const specialProducts = /*[[${products.special}]]*/ [];

  function LetsSayLoop() {
    let counter = 0;
    $('#checkboxContainer .checkboxesClassName').each(function() {
      if($(this).is(":checked")) {
        // 现在可以自由用JS变量索引了
        const current_product_price = specialProducts[counter].price;
        // 这里还能直接取id等其他字段
        const current_product_id = specialProducts[counter].id;
        counter++;
      }
    });
  }

  // 测试循环也能正常工作
  for (let i = 0; i < specialProducts.length; i++) {
    console.log(specialProducts[i].price);
  }
</script>

方案2：把产品数据嵌入DOM自定义属性 #

如果你的需求只和复选框关联，没必要传递全量数据，可以在渲染复选框的时候，把产品的id、price等数据存在DOM的data-*自定义属性里，JS遍历复选框时直接从DOM取数据，连索引都不需要。

<!-- 先在渲染复选框时，把产品数据绑定到DOM属性上 -->
<div id="checkboxContainer">
  <input type="checkbox" class="checkboxesClassName" 
         th:each="product : ${products.special}"
         th:data-product-id="${product.id}"
         th:data-product-price="${product.price}"
         th:value="${product.id}">
</div>

<script th:inline="javascript">
  function LetsSayLoop() {
    // 直接遍历选中的复选框，从DOM属性取数据
    $('#checkboxContainer .checkboxesClassName:checked').each(function() {
      const current_product_price = $(this).data('product-price');
      const current_product_id = $(this).data('product-id');
      // 执行你的业务逻辑
    });
  }
</script>

本质上就是要区分服务端渲染阶段和客户端JS执行阶段：Thymeleaf只能处理服务器端已有的变量，没法识别还没运行的JS变量。要么把服务器数据全量转成JS对象，要么把数据嵌入DOM，让JS从客户端环境获取数据。

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