CODEWITHSUNDEEP
javascriptthymeleaf
jon daniels
jon daniels

Reputation: 3

Looping through array Thymeleaf using javascript

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?

Upvotes: 0

Views: 2254

Answers (3)

Ziv Weissman
Ziv Weissman

Reputation: 4526

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

Upvotes: 1

David Zwart
David Zwart

Reputation: 438

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());

Upvotes: 0

osmay88
osmay88

Reputation: 429

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();

Upvotes: 1

Related Questions