Looping through array Thymeleaf using javascript

Question

I have the array variable (coming from back end) called "products". It has the following structure:
--products
-----special
----------0
---------------id
---------------price
---------------etc.....
----------1
---------------id
---------------price
---------------etc
----------2..etc

I am using thymeleaf. I am trying to loop the "special products" in javascript and trying to use their indexes to get the subdata (id, price, etc..). I am trying to use a new integer variable called "counter" to access the index. So my code is:

<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>

My IDE (netbeans) is saying that the variable "counter " is not being used. Also the generated Javascritp and HTML ends with the following: Any ideas why?

var current_product_price =

EDIT: Small addition about the loop in 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}]]);
}

EDIT: (possible answer?)
I understood that thymeleaf does not recognize local javascript variables in [[]] scope. For example:

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

the code expects that the variable "counter" is coming from thymeleaf. I need to do it using indexes, but with local variables it does not work. Can I increment some local js variables to accomplish this? Or is it some other way?

So the only issue is a warning you see on your IDE? The code is working properly? Could be a bug on the IDE, they have those :P the code seems fine to me. — Ziv Weissman, Jan 02 '18 at 14:42
Nope, the code is not working. It breaks and the output ends with: "var current_product_price = " and Thats it. No more code after that — jon daniels, Jan 02 '18 at 14:51

score 1 · Answer 1 · answered Jan 02 '18 at 14:42

1

If you change jquery.each for a forEach it should work. Here one example

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

 a();

answered Jan 02 '18 at 14:42

osmay88

421
3
12

the main idea is that the generated javascript will not show unused data(such as name, id, etc..). This method will probably work, but [1,2,3,4] will be replaced with the actual product full information – jon daniels Jan 02 '18 at 14:50

Ziv Weissman · Answer 2 · 2018-01-02T21:07:12.847

The code looks fine to me, so it should work.

If the only issue is a warning you see on the IDE, I wouldn't worry, it could be a bug.

However you don't need to use a counter, you can use the build-in variable that .each uses:

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

EDIT:

Ok I think now I understand the issue:

You cannot use javascript variables inside this kind of expression. Break it down into two - first create a js variable from the array, then use [index] like so:

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...  
        }
    }); 
}

it sure does work, but the generated javascript has all the ${setProducts} fields which I want not to be shown in the code — jon daniels, Jan 03 '18 at 07:48
@jondaniels Hmm ok, so you can't create a counter on Thymeleaf ? { — Ziv Weissman, Jan 03 '18 at 07:55

score 0 · Answer 3 · answered Jan 02 '18 at 15:16

0

I can't comment yet, so I'll post an answer.

Please add this line to the each call and show us if counter is in fact available in the each scope and updated. Next to that you'll know how many times it is actually called.

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

answered Jan 02 '18 at 15:16

David Zwart

431
5
23

Thats not the issue. The loop breaks after reading the line "var current_product_price = [[${setProducts[counter].price}]];" . I am not being able to use the counter variable. If this variable is replaced by a Thymeleaf variable it is ok, but I cannot evaluate the thymeleaf variable – jon daniels Jan 02 '18 at 15:20
Could it be a problem with the setProducts[] array? Output it's size and let us know. I understand this seems redundant, but you leave us with little information and no example to run. – David Zwart Jan 02 '18 at 15:23
1

the size is OK. The thing I managed to discover is that thymeleaf understands that the line: `var current_product_price = [[${setProducts[counter].price}]];` is using the variable counter, that is coming from thymeleaf and i cannot use some local js variable. The question is can I use a local thymeleaf variable and increment it every time? – jon daniels Jan 02 '18 at 15:28
This is a different question, update your question statement above and you'll get an answer. I expect it to be no, but I'm not experienced with Thymeleaf. Maybe there is something in their documentation? – David Zwart Jan 02 '18 at 15:31
With my limited knowledge: https://stackoverflow.com/questions/20728660/setting-up-a-value-for-a-variable-name-in-thymeleaf – David Zwart Jan 02 '18 at 15:34
I am familiar with this and trying to use it – jon daniels Jan 02 '18 at 15:36

Looping through array Thymeleaf using javascript

3 Answers3