For loop through custom field in JavaScript I'm using a script to animate four sets of numbers on a page.  I would like the numbers to be editable from within the admin (a SuperTable field).

Currently I have this:

&lt;ul class="counters"&gt;
   {% for stats in entry.statsPanels %}
   &lt;li&gt;&lt;span id="tal-{{ loop.index0 }}" class="tal"&gt;0&lt;/span&gt;{{ stats.statDescription }}&lt;/li&gt;
   {% endfor %}
&lt;/ul&gt;


Which is working fine for looping through and pulling back the 'Stat Descriptions'.



Somehow I also need to loop through the 'Stats Number' column and embed this into the JavaScript that animates the numbers...  at the moment they're hard coded '400, 60, 1800, 40'.

     $(document).ready(function(){
      function numberWithCommas(n) {
       var parts=n.toString().split(".");
       return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }

      var endingCounterVar = [400, 60, 1800, 40];

      for (let i = 0; i &lt;= 3; i++) {

      let counter = { var: 0 };
      let tal = document.getElementById("tal-"+i);

      TweenMax.to(counter, 5, {
       var: endingCounterVar[i],
       onUpdate: function () {
        let nwc = numberWithCommas(counter.var);
        tal.innerHTML = nwc;
       },
       ease:Circ.easeOut
     });
    }
   });


Any help is very much appreciated.

Thank you

Martin
You could output the numbers in a data attribute on a wrapping HTML element:

{% set numbers = '' %} 

{% for stats in entry.statsPanels %}
    {% set numbers = numbers ~ stats.statsNumber %}
    {% if not loop.last %}
        {% set numbers = numbers ~ ',' %}
    {% endif %}
{% endfor %}

&lt;div class="myComponent" data-numbers="{{ numbers }}"&gt;
...
&lt;/div&gt;


Then you can read them in your JavaScript file:

var endCounterVar = $('.myComponent').data('numbers');

if (endCounterVar.length) {
    endCounterVar = endCounterVar.split(',');
}


This might not be the cleanest/shortest way to achieve this in Twig, mind you!