Javascript 如何修复在live google图表中使用的编码错误的JSON数据？_Javascript_Html_Flask_Google Api

Javascript 如何修复在live google图表中使用的编码错误的JSON数据？

javascript html flask google-api

Javascript 如何修复在live google图表中使用的编码错误的JSON数据？,javascript,html,flask,google-api,Javascript,Html,Flask,Google Api,我在我的网站上的一个页面上使用flask和google图表。我有一个页面，显示json对象格式的数据库的最后一行，如下所示： {"temperature": 11.0, "datetime": "12-12-12 23-23-23"} 在flask中，我制作此getjson页面，如下所示： @app.route('/getjson') def getjson(): tempdata = getTemperatureData() return render_template('g

我在我的网站上的一个页面上使用flask和google图表。我有一个页面，显示json对象格式的数据库的最后一行，如下所示：

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

在flask中，我制作此getjson页面，如下所示：

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

<!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>

这会将局部变量tempdata传递给它。在此之后，我创建了一个html文件getjson.html，其简单代码如下：

{{tempdata}}

然而，当我加载网页并在inspect element选项卡中进行检查时，我得到了一个类似于Pythonywhere或flask添加了所有html数据的结果：

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

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

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

<!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 from public view just in case',
    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);
  });
}

为什么您得到的JSON文件有一个.html扩展名getjson.html？34岁；您看到的字符是双引号，因为它们将在HTML文件中呈现。这不是json文件，我收到的是打印在HTML页面中的json对象，这不是正确的方法吗？我不太确定？嗨，谢谢你的帮助。因此，我应该将decodeEntities函数放在我的getjson.html页面中，还是放在chart.html页面中drawchart函数的上方，我在drawchart上面展示了decodeEntities函数，这是一个很好的地方；我添加了您的更改，但仍然存在错误：parserrror-SyntaxError:Unexpected-token&in-JSON在Nb jquery.min.js:4在jquery.min.js:4在XMLHttpRequest的位置1处。jquery.min.js:4有没有更好的方法来解决这个问题？我真的很赞成任何建议，因为这个问题已经持续了一段时间