CODEWITHSUNDEEP
javascriptjsonsymfonytwig
Megumin
Megumin

Reputation: 321

How to pass information from Twig to Javascript using JSON?

twig :

    {% for i in score %}
    <canvas class="credsEarned">
    <div id="test" data-is-test="{{ i.pts|json_encode }}">
    </div>
    </canvas>
    {% endfor %}

javascript :

$(document).ready(function(){
var contexts = $('.credsEarned');
    for(var i = 0;i<contexts.length;i++){ 
        var data = $('#test').data("isTest");
var context = contexts.get(i).getContext('2d');
}
});

result :

only the first variable in the twig loop is consecutively retrived

using this doc https://symfony.com/doc/3.4/frontend/encore/server-data.html

i modified my code but still it's the same outcome

twig :

{% for i in score %}
<canvas class="credsEarned">
<div class="js-user-rating" data-is-authenticated="{{ i.pts }}"></div>
</canvas>
{% endfor %}

javascript :

$(document).ready(function(){

    var contexts = $('.credsEarned');
    for(var i = 0;i<contexts.length;i++){
        var userRating = document.querySelector('.js-user-rating');
        var data = userRating.dataset.isAuthenticated;
}
});

Upvotes: 1

Views: 1558

Answers (2)

RedaMakhchan
RedaMakhchan

Reputation: 481

What I see here is that you don't use the indice i to select your js-user-rating, is that normal ? I think that why you have always the first element.

may be, you can do like :

for(var i = 0;i<contexts.length;i++){
  var context = contexts[i]
  var userRating = context.find('.js-user-rating');
  var data = userRating.dataset.isAuthenticated;
  ...
}

Upvotes: 0

Philippe-B-
Philippe-B-

Reputation: 636

I don't know how big your script is, but you could put it in the template to set the variable using twig.

{% for i in score %}
    <canvas class="credsEarned">
        <div class="js-user-rating"></div>
    </canvas>
{% endfor %}

<script>
    $(document).ready(function(){
        var dataArray = [
            {% for i in score -%}
                {{ i.pts|json_encode }},
            {% endfor -%}
        ];

        var contexts = $('.credsEarned');
        for(var i = 0;i<contexts.length;i++){ 
            var data = dataArray[i];
            var context = contexts.get(i).getContext('2d');
        }
    });
</script>

I made it simple for comprehension but of course you could put the script in a twig block to load it at the bottom of the page.

If you can't (or don't want to) separate this part of your script from the rest in order to put it in the template, you could just set the data in a global variable in the template and use it in your javascript file when document is ready:

Twig:

{% for i in score %}
    <canvas class="credsEarned">
        <div class="js-user-rating"></div>
    </canvas>
{% endfor %}

<script>
    dataArray = [
        {% for i in score -%}
            {{ i.pts|json_encode }},
        {% endfor -%}
    ];
</script>

Javascript:

<script>
    $(document).ready(function(){
        var contexts = $('.credsEarned');
        for(var i = 0;i<contexts.length;i++){ 
            var data = dataArray[i];
            var context = contexts.get(i).getContext('2d');
        }
    });
</script>

Upvotes: 2

Related Questions