修复 JSON 数据的格式，以便在实时图表的 google chart api 中使用答案

【问题标题】：Fixing the format of JSON data for use in google charts api for live graph修复 JSON 数据的格式，以便在实时图表的 google chart api 中使用
【发布时间】：2018-03-10 11:39:48
【问题描述】：

我在我网站的一个页面上使用烧瓶和谷歌图表。我有一个页面显示数据库的最后一行是 json 对象格式：

{"temperature": 11.0, "datetime": "12-12-12 23-23-23"}

在烧瓶中，我正在制作这个 getjson 页面，如下所示：

@app.route('/getjson')
def getjson():
    tempdata = getTemperatureData()
    return render_template('getjson.html', **locals())

这会将局部变量 tempdata 传递给它。在此之后，我用简单的代码制作了一个html文件（getjson.html）：

{{tempdata}}

当我加载网页并检查检查元素选项卡时，我得到了这个，看起来像 pythonanywhere 或烧瓶已经添加了所有这些 html 数据：

<html>
    #shadow-root (open)
    <head></head>
    <body>{"temperature": 11.0, "datetime": "12-12-12 23-23-23"}</body>
</html>

我的问题是我的谷歌图表无法加载，它似乎在我的浏览器的网络预览选项卡中接收到这些数据，这看起来与我希望它接收的完全不同（它应该是一个 json object) 但它有所有这些添加的字符：

{&#34;temperature&#34;: 11.0, &#34;datetime&#34;: &#34;12-12-12 23-23-23&#34;}

我的谷歌图表应该能够实时更新的代码如下：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="chart_div" style="width: 900px; height: 500px"></div>

   <script type="text/javascript">
    google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date Time');
    data.addColumn('number', 'Temperature');
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    var options = {
      title: 'Temperature Data',
      curveType: 'none',
      legend: { position: 'bottom' }
    };

    drawChart();
    setInterval(drawChart, 10000);

    function drawChart() {
      $.getJSON({
        url: 'removed from public view just in case',
        type: 'get'
      }).done(function (jsonData) {
        data.addRows([
          [jsonData.datetime, jsonData.temperature]
        ]);
        chart.draw(data, options);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
      });
    }
  },
  packages: ['corechart']
});
    </script>
    </body>
</html>

有人建议改成如下，将接收到的数据插入到一个元素中，并返回它的值，但是这样不行。

 function decodeEntities(encodedString) {
        var textArea = document.createElement('textarea');
        textArea.innerHTML = encodedString;
        return textArea.value;
    }

    function drawChart() {
        $.getJSON({
            url: 'removed ...',
            type: 'get'
        }).done(function (jsonData) {
            jsonData = decodeEntities(jsonData);
            data.addRows([
            [jsonData.datetime, jsonData.temperature]
            ]);
            chart.draw(data, options);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            });
    }

真的在寻找这个问题的有效解决方案，谢谢。

【问题讨论】：

标签： javascript html flask charts google-api

【解决方案1】：

你的烧瓶端点不应该返回这个

return render_template('getjson.html', **locals())

这将返回 html。而是做这样的事情：

from flask import jsonify
return jsonify(your_data)

【讨论】：