For loop through custom field in JavaScript

Question

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:

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

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

Answer 1

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

<div class="myComponent" data-numbers="{{ numbers }}">
...
</div>

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!