Template variable injection in JS script

Question

I have encountered a quite peculiar issue in my flask app trying to inject a template variable withing a Js script , I don't really understand what the problem is so here it goes.

I am specifically trying to inject two variables: a list of numbers and a list of strings (same length), so that I can plot the data on a chart.js plot.

The problem is that when injecting a single variable (the list of numbers) the page renders the pie chart with no errors, but then when i add the second variable (list of strings) the page goes blank.

Here is the JS snippet:

 <div class='chart'>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript">
    var data = {{values}};
    var labels = {{labels}};
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                labels: '# of Votes',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255,1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    </script>

And flask:

@app.route('/test')

def test():
    screener = Signals()
    major_news = screener.major_news()
    distribution = screener.industry_distribution(major_news)
    
    return render_template('test.html', labels=[str(key) for key in distribution], values=[distribution[key] for key in distribution])

Keep in mind that the variables have both been checked and they both contain what they should.

In the JS script the labels variable is doing nothing but still throws an error as soon as declared.

Thanks for helping.

Seems like a duplicate of How can I pass data from Flask to JavaScript in a template? — CollinD
– CollinD, Commented Dec 30, 2021 at 17:10

Der Henning · Accepted Answer · 2021-12-30 17:09:44Z

0

Refering to this SO Answer https://stackoverflow.com/a/48237270/17798307

Flask provides a Jinja filter for this: tojson dumps the structure to a JSON string and marks it safe so that Jinja does not autoescape it.

Please try to declare your variables like this:

var labels = {{labels | tojson}};

answered Dec 30, 2021 at 17:09

Der Henning

2191 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rickturner2001 Over a year ago

Yes i thought about doing that but my object is not serializable as it is a list

Der Henning Over a year ago

OK. Maybe dump to json in python.labels=json.dumps([str(key) for key in distribution])

rickturner2001 Over a year ago

I made a python dict with the two lists and now it works. Thanks a lot for your help

Collectives™ on Stack Overflow

Template variable injection in JS script

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related