Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-14T16:05:28.180Z
Answers.Text: 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()
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-14T17:59:44.600Z
Answers.Text: `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)
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T10:04:03.397Z
Answers.Text: 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
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T14:40:29.863Z
Answers.Text: 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];`
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T14:52:39.413Z
Answers.Text: 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.
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T15:00:08.697Z
Answers.Text: I've forked your code example to show the above in a vanilla (i.e. non-jQuery) solution: https://codepen.io/martinspain/pen/NeJGjE
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T16:19:56.920Z
Answers.Text: 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!
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-15T16:25:01.390Z
Answers.Text: 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.
Answers.UserDisplayName: Martin Spain
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-01-14T15:40:40.787Z
Answers.LastActivityDate: 2019-01-14T15:40:40.787Z
Answers.UserDisplayName: Martin Spain
Body: <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>
  
Tags: <forloop><javascript><custom-field><plugin-supertable>
Title: For loop through custom field in JavaScript
ThreadText: # 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:
  
  ```
  <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'.
  
  [![SuperTable field in Admin](https://i.sstatic.net/0mrFm.png)](https://i.sstatic.net/0mrFm.png)
  
  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
  
  username_0
  
  **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 %}
  
  <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!
  
  > **Comments:**
  > **username_0**: Hello, thank you for your response username_0.  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/username_1/pen/NeJGjE  
  > **username_0**: Hi username_0, 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.  
  
  ---
  
  