个人中心
gpt4 book ai didi

javascript - 如何修复编码错误的 JSON 数据以在实时谷歌图表中使用？

转载 作者：行者123 更新时间：2023-12-03 02:19:59 25 4
gpt4 key购买 nike

我在我网站的页面上使用 flask 和谷歌图表。我有一个页面显示数据库的最后一行，该数据库采用 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())

这会将局部变量 tempdata 传递给它。之后，我用简单的代码创建了一个 html 文件(getjson.html):

{{tempdata}}

当我加载网页并检查检查元素选项卡时，我得到的结果看起来像 pythonanywhere 或 Flask 已经添加了所有这些 html 数据:

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

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

{&#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 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);
  });
}

关于javascript - 如何修复编码错误的 JSON 数据以在实时谷歌图表中使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49204112/

25 4 0
文章推荐： javascript - 如何通过cmd创建Cordova和TypeScript项目
文章推荐： javascript - Mongoose findOneAndUpdate : create and then update nested array
文章推荐： javascript - socket.io 客户端无法向服务器发送消息
文章推荐： javascript - 如何使用 navigator.mediaDevices.getUserMedia 降低麦克风输入音量？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com