Proper way to use a counter variable in HTML/Javascript

Question

I am using Django and Chart.js, but I don't think what's more important here is an understanding of Javascript and HTML.

To create charts using Chart.js, I need the charts to have different names. For this, I have thought about using a counter variable.

    <script>**var count = 0;**</script>

<ul>
    {% for object in objects %}

    <li>
        ...
        <script> 
            
            {% block jquery %}
            console.log(count);
            var endpoint = '/api/chart/data/';

            fetch(endpoint, {
                method: "GET",
            }).then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                **count = count + 1;**
                ...
                eval('var chart_id = "myChart{{ count }}"');
                eval('var ctx{{ count }} = document.getElementById(chart_id)');

                eval('var myChart =  new Chart(ctx{{ count }}, graph_data)');
                console.log("myChart{{ count }}")
                })
                .catch((error) => {
                    console.log("Error:")
                    console.log(error);
                });

                        
            {% endblock %}
        </script>
        <canvas id= "myChart{{ count }}" width="400" height="400"></canvas>
        ...
    </li>
    {% endfor %}
</ul>

However, when I look in the source code on my dev server, I can see that the id for all of the canvas tags is simply "myChart". Why is this? What am I doing wrong?

Your `count` variable resides on client (browser), so your template system (on server) can't use it for replacements. Also, that piece of Javascript is inside a loop, but should be inside a function that you can call when you need it. Finally, [try not to use `eval()`](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea) — Triby, Dec 28 '20 at 15:58

Ajay Lingayat · Accepted Answer · 2020-12-29T03:02:07.890

Try this:

{{ forloop.counter }} will return the current iteration count going on.

<ul>
    {% for object in objects %}

    <li>
        ...
        <script> 
            
            {% block jquery %}
            console.log(count);
            var endpoint = '/api/chart/data/';

            fetch(endpoint, {
                method: "GET",
            }).then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                ...
                eval('var chart_id = "myChart{{ forloop.counter }}"');
                eval('var ctx{{ forloop.counter }} = document.getElementById(chart_id)');

                eval('var myChart =  new Chart(ctx{{ forloop.counter }}, graph_data)');
                console.log("myChart{{ forloop.counter }}")
                })
                .catch((error) => {
                    console.log("Error:")
                    console.log(error);
                });

                        
            {% endblock %}
        </script>
        <canvas id= "myChart{{ forloop.counter }}" width="400" height="400"></canvas>
        ...
    </li>
    {% endfor %}
</ul>

Proper way to use a counter variable in HTML/Javascript

1 Answers1