<p>You could output the numbers in a data attribute on a wrapping HTML element:</p>

<pre><code>{% 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;
</code></pre>

<p>Then you can read them in your JavaScript file:</p>

<pre><code>var endCounterVar = $('.myComponent').data('numbers');

if (endCounterVar.length) {
    endCounterVar = endCounterVar.split(',');
}
</code></pre>

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

CC BY-SA 4.0
2019-01-14T16:05:28.180Z
Hello, thank you for your response Martin.  I'm not sure if i've understood you correctly but  I get the error Calling unknown method: verbb\supertable\elements\SuperTableBlockElement::statsNumber()
Martin
CC BY-SA 4.0
2019-01-14T17:59:44.600Z
`statsNumber` was my guess at what your field handle was for the number field. If you include the correct field handle, hopefully that should resolve your issue. (edit: looks like I made it plural by mistake - try `statNumber` instead)
Martin Spain
CC BY-SA 4.0
2019-01-15T10:04:03.397Z
Hi, the numbers are now being passed into the data-numbers="402,602,1800,40" attribute, in fact they're appearing as comma a separated group wherever the {{ numbers }} tag is placed, but they need to be passed into the actual javascript file so they can processed into the page.  It may be clearer if you see a link to the script i'm using https://codepen.io/jonathan/pen/VqdJVj
Martin
CC BY-SA 4.0
2019-01-15T14:40:29.863Z
OK, so now you have the numbers in a data attribute, your JavaScript can access that data attribute using the jQuery `.data()` function. In your JavaScript file or code snippet, you need to change the line that says `var endingCounterVar = [2100, 1000, 1500, 1800];`
Martin Spain
CC BY-SA 4.0
2019-01-15T14:52:39.413Z
The second code example in my answer above shows how to take that data attribute value and pull it into your JavaScript file using the jQuery `data()` function.
Martin Spain
CC BY-SA 4.0
2019-01-15T15:00:08.697Z
I've forked your code example to show the above in a vanilla (i.e. non-jQuery) solution: https://codepen.io/martinspain/pen/NeJGjE
Martin Spain
CC BY-SA 4.0
2019-01-15T16:19:56.920Z
Hi Martin, it's working for me now.  endCounterVar = endingCounterVar.  It worked as soon as I corrected the spelling.  I don't really understand how it works but I massively appreciate your help.  It looks like the numbers are generated in the HTML and then stored in .myComponent where the JS then goes to find them 'endingCounterVar'?   Thank you!
Martin
CC BY-SA 4.0
2019-01-15T16:25:01.390Z
Great, glad it's working. You're basically using Twig to output your data from Craft into your page's HTML markup, then using JavaScript to read that data from the HTML into a variable. Using data attributes in this way is very useful when you're working with content-managed values that need to be referenced in JavaScript.
Martin Spain
CC BY-SA 4.0
2019-01-14T15:40:40.787Z
2019-01-14T15:40:40.787Z
Martin Spain
<p>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).</p>

<p>Currently I have this:</p>

<pre><code>&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;
</code></pre>

<p>Which is working fine for looping through and pulling back the 'Stat Descriptions'.</p>

<p><a href="https://i.sstatic.net/0mrFm.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0mrFm.png" alt="SuperTable field in Admin"></a></p>

<p>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'.</p>

<pre><code>     $(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
     });
    }
   });
</code></pre>

<p>Any help is very much appreciated.</p>

<p>Thank you</p>

<p>Martin</p>

<forloop><javascript><custom-field><plugin-supertable>
For loop through custom field in JavaScript
# For loop through custom field in JavaScript

(Asked by: username_0 on 2019-01-14)

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:

   {% for stats in entry.statsPanels %}
   0{{ stats.statDescription }}
   {% endfor %}


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

**Tags:** forloop, javascript, custom-field, plugin-supertable

---

## 1 answers

### Answer by username_1 on 2019-01-14. Score: 0 | Accepted answer

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


...


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!

> **Comments:**
> **username_0**: Hello, thank you for your response Martin.  I'm not sure if i've understood you correctly but  I get the error Calling unknown method: verbb\supertable\elements\SuperTableBlockElement::statsNumber()  
> **username_1**: `statsNumber` was my guess at what your field handle was for the number field. If you include the correct field handle, hopefully that should resolve your issue. (edit: looks like I made it plural by mistake - try `statNumber` instead)  
> **username_0**: Hi, the numbers are now being passed into the data-numbers="402,602,1800,40" attribute, in fact they're appearing as comma a separated group wherever the {{ numbers }} tag is placed, but they need to be passed into the actual javascript file so they can processed into the page.  It may be clearer if you see a link to the script i'm using https://codepen.io/jonathan/pen/VqdJVj  
> **username_1**: OK, so now you have the numbers in a data attribute, your JavaScript can access that data attribute using the jQuery `.data()` function. In your JavaScript file or code snippet, you need to change the line that says `var endingCounterVar = [2100, 1000, 1500, 1800];`  
> **username_1**: The second code example in my answer above shows how to take that data attribute value and pull it into your JavaScript file using the jQuery `data()` function.  
> **username_1**: I've forked your code example to show the above in a vanilla (i.e. non-jQuery) solution: https://codepen.io/martinspain/pen/NeJGjE  
> **username_0**: Hi Martin, it's working for me now.  endCounterVar = endingCounterVar.  It worked as soon as I corrected the spelling.  I don't really understand how it works but I massively appreciate your help.  It looks like the numbers are generated in the HTML and then stored in .myComponent where the JS then goes to find them 'endingCounterVar'?   Thank you!  
> **username_1**: Great, glad it's working. You're basically using Twig to output your data from Craft into your page's HTML markup, then using JavaScript to read that data from the HTML into a variable. Using data attributes in this way is very useful when you're working with content-managed values that need to be referenced in JavaScript.  

---

