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
– Ziv Weissman, Commented Jan 2, 2018 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
– jon daniels, Commented Jan 2, 2018 at 14:51

osmay88 · Accepted Answer · 2018-01-02 14:42:27Z

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 2, 2018 at 14:42

osmay88

4293 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jon daniels Over a year ago

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

Ziv Weissman · Accepted Answer · 2018-01-02 21:07:12Z

1

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

edited Jan 2, 2018 at 21:07

answered Jan 2, 2018 at 14:45

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

2 Comments

jon daniels Over a year ago

it sure does work, but the generated javascript has all the ${setProducts} fields which I want not to be shown in the code

Ziv Weissman Over a year ago

@jondaniels Hmm ok, so you can't create a counter on Thymeleaf ? {

David Zwart · Accepted Answer · 2018-01-02 15:16:33Z

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 2, 2018 at 15:16

David Zwart

4385 silver badges25 bronze badges

6 Comments

jon daniels Over a year ago

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

David Zwart Over a year ago

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.

jon daniels Over a year ago

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?

David Zwart Over a year ago

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 Over a year ago

With my limited knowledge: stackoverflow.com/questions/20728660/…

|

Collectives™ on Stack Overflow

Looping through array Thymeleaf using javascript

3 Answers 3

1 Comment

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related