使用javascript循环遍历数组Thymeleaf

Question

我有一个名为“products”的数组变量（来自后端）。它具有以下结构：
--产品
-----特别
----------0
---------------身份证
---------------价格
---------------等.....
----------1
---------------身份证
---------------价格
---------------等
----------2..等

我正在使用百里香叶。我正在尝试在 javascript 中循环“特殊产品”并尝试使用它们的索引来获取子数据（id、价格等）。 我正在尝试使用一个名为“counter”的新整数变量来访问索引。所以我的代码是：

<script th:inline="javascript" th:with="setProducts=(${products.special})">
    function LetsSayLoop() {
        var counter = 0;
        //looping through some checkboxes
        $('#checkboxContainer .checkboxesClassName').each(function() {
            if($(this).is(":checked")) {
                //this is working:
                var current_product_price = [[${setProducts[0].price}]];
                //this is also working:
                //var current_product_price = [[${setProducts[1].price}]];
                //etc...

                //this is not working:
                var current_product_price = [[${setProducts[counter].price}]];
                counter++;
            }
        }); 
    }
</script>

我的 IDE (netbeans) 说变量“counter”没有被使用。生成的 Javascritp 和 HTML 也以以下结尾： 任何想法为什么？

var current_product_price = 

编辑：关于 javascript 中循环的小补充：

//[[${#lists.size(setProducts)}]] outputs the desired integer;
for (i = 0; i < [[${#lists.size(setProducts)}]]; i++) {
    //this is working:
    console.log([[${setProducts[0].price}]]);
    //this is not:
    console.log([[${setProducts[i].price}]]);
}

编辑：（可能的答案？）
我知道 thymeleaf 无法识别 [[]] 范围内的本地 javascript 变量。例如：

var current_product_price = [[${setProducts[counter].price}]];

代码期望变量“counter”来自百里香。 我需要使用索引来做到这一点，但使用局部变量它不起作用。我可以增加一些本地 js 变量来完成这个吗？还是有其他方式？

Answer 1

如果您将jquery.each 更改为forEach，它应该可以工作。这里举个例子

 function a() {
      var counter =0;
      [1, 2, 3, 4].forEach(function(e){
              console.log('Element:', e);
              console.log('Counter:', counter++);
      });
 }

 a();

Answer 2

代码对我来说看起来不错， 所以它应该工作。

如果唯一的问题是您在 IDE 上看到的警告，我不会担心，这可能是一个错误。

但是你不需要使用计数器，你可以使用 .each 使用的内置变量：

.each(function( index, element ) {
  //Use index instead of counter.
}

编辑：

好的，我想现在我明白了这个问题：

您不能在这种表达式中使用 javascript 变量。将其分为两部分 - 首先从数组中创建一个 js 变量，然后像这样使用 [index]：

function LetsSayLoop() {
    var current_Products = [[${setProducts}]]; //btw not sure about double brackets
    //looping through some checkboxes
    $('#checkboxContainer .checkboxesClassName').each(function(index) {
        if($(this).is(":checked")) {

            //this should work:
            var current_product_price = current_Products[index];
            //etc...  
        }
    }); 
}

Answer 3

我还不能评论，所以我会发布答案。

请将此行添加到each 调用中，并告诉我们计数器是否实际上在each 范围内可用并更新。接下来你会知道它实际被调用了多少次。

alert("Counter val: " + counter.toString());