将 HTML 变量传递给单独的 javascript 文件答案

【问题标题】：Pass HTML variable to separate javascript file将 HTML 变量传递给单独的 javascript 文件
【发布时间】：2017-04-04 15:46:58
【问题描述】：

我的 html 文件中有一个名为“sentiments”的字典（从 python 类发送）。以下：

{% if sentiments %}
    <p>{{sentiments}}</p>
{% else %}
    <p>none</p>
{%endif%}

打印：

('very positive', 34)
('positive', 64)
('neutral', 44)
('negative', 11)
('very negative', 27)

所以我知道很多工作都很好。在一个单独的 javascript 文件中，我有一个带有硬编码值的 morris 条形图，如下所示：

Morris.Bar({
    element: 'bar-chart',
    data: [
        { x: 'V. Pos', y: 10},
        { x: 'Pos', y: 20},
        { x: 'Neutral', y: 30},
        { x: 'Neg', y: 20},
        { x: 'V.Neg', y: 10},
    ],

    xkey: 'x',
    ykeys: ['y'],
    labels: ['# Tweets'],
    barColors: function (row, series, type) {
        console.log("--> "+row.label, series, type);
        if(row.label == "V. Pos") return "#3300FF";
        else if(row.label == "Pos") return "#6600FF";
        else if(row.label == "Neutral") return "#9900FF";
        else if(row.label == "Neg") return "#FF3333";
        else return "#ff0000";
    }
});

我这样调用这个脚本：

<div class="bar"; style="float:left; width:50%;">
    <div id="bar-chart"></div>
    <script src="../static/barchart.js"></script>
</div>

我想将我的字典“情绪”传递给这个脚本，并使用其中的值来填充图表，而不是我现在拥有的硬编码值。任何帮助将非常感激。我正在使用 Flask 连接我的 python 和 html。

【问题讨论】：

标签： javascript python html bar-chart morris.js

【解决方案1】：

您可以通过以下方式将变量转录为 JS：

<body>
  <script>
    var myData = JSON.parse('{{sentiments_str | safe}}')
  </script>
</body>

在渲染页面时，一定要使用json.dumps传入sentiments，比如：

return render_template('page.html', sentiments_str=json.dumps(sentiments))

【讨论】：

感谢您的回答。我试过这个，现在这一行： var moods_dict = {{ moods_str }} 给了我错误：“表达式语句不是赋值或调用”
我做了一些改变，试试吧。