title: How to pass information from Twig to Javascript using JSON?
body: <p>twig :</p>
  
  <pre><code>    {% for i in score %}
      &lt;canvas class="credsEarned"&gt;
      &lt;div id="test" data-is-test="{{ i.pts|json_encode }}"&gt;
      &lt;/div&gt;
      &lt;/canvas&gt;
      {% endfor %}
  </code></pre>
  
  <p>javascript :</p>
  
  <pre><code>$(document).ready(function(){
  var contexts = $('.credsEarned');
      for(var i = 0;i&lt;contexts.length;i++){ 
          var data = $('#test').data("isTest");
  var context = contexts.get(i).getContext('2d');
  }
  });
  </code></pre>
  
  <p>result :</p>
  
  <p>only the first variable in the twig loop is consecutively retrived</p>
  
  <p>using this doc <a href="https://symfony.com/doc/3.4/frontend/encore/server-data.html" rel="nofollow noreferrer">https://symfony.com/doc/3.4/frontend/encore/server-data.html</a></p>
  
  <p>i modified my code but still it's the same outcome</p>
  
  <p>twig :</p>
  
  <pre><code>{% for i in score %}
  &lt;canvas class="credsEarned"&gt;
  &lt;div class="js-user-rating" data-is-authenticated="{{ i.pts }}"&gt;&lt;/div&gt;
  &lt;/canvas&gt;
  {% endfor %}
  </code></pre>
  
  <p>javascript :</p>
  
  <pre><code>$(document).ready(function(){
  
      var contexts = $('.credsEarned');
      for(var i = 0;i&lt;contexts.length;i++){
          var userRating = document.querySelector('.js-user-rating');
          var data = userRating.dataset.isAuthenticated;
  }
  });
  </code></pre>