HTML/Chart JS 从 Python Flask 反序列化 JSON答案

【问题标题】：HTML/Chart JS deserialize JSON from Python FlaskHTML/Chart JS 从 Python Flask 反序列化 JSON
【发布时间】：2018-10-31 16:48:01
【问题描述】：

我正在尝试将对象返回给 Chart JS 应用程序。数据最初来自 pandas 中的数据框。

所以这是生成的原始对象。

{'datasets': [{'label': 'Door_08', 'data': [{'x': Timestamp('2018-10-23 00:22:43'), 'description': 'Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517', 'y': 1}, ...

但是，pandas Timestamp 存在一些问题。因此，我通过将对象转换为 JSON 来处理它，从 this answer 获得。

现在看起来：

{"datasets": [{"label": "Door_08", "data": [{"x": "2018-10-23 00:22:43", "description": "Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517", "y": 1}, ...

但是我仍然看不到我的图表。检查页面：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: "{&#34;datasets&#34;: [{&#34;label&#34;: &#34;Door_08&#34;, &#34;data&#34;: [{&#34;x&#34;: &#34;2018-10-23 00:22:43&#34;, &#34;description&#34;: &#34;Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517&#34;, &#34;y&#34;: 1},

所以我猜它没有被正确解码？

这就是我获取对象的方式：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: "{{ object_returned }}",

我的字符集：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ title }}</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>

还有我的 Flask 后端：

@app.route('/logs', methods=['GET', 'POST'])
def eventlogs():
    # Do something
    return render_template('logs.html', error=error, form=form, object_returned=object_returned)

如何正确反序列化对象？

【问题讨论】：

标签： javascript python html json chart.js

【解决方案1】：

将 tojson 过滤器应用于object_returned:

var myChart = new Chart(ctx, {
    type: 'line',
    data: "{{ object_returned|tojson|safe }}",
    ...

【讨论】：

还没有成功。检查返回的数据为：data: ""{\"datasets\": [{\"label\": \"Door_08\", \"data\": [{\"x\": \"2018-10-23 00:22:43\", \"description\": \"Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517\", \"y\": 1},
现在成功了！我返回了class 'dict' 而不是json。我还删除了"{{ object_returned|tojson|safe }}" 上的引号，因为它使数据成为字符串。谢谢！

【解决方案2】：

python 返回的数据是类类型 'dict' 而不是 json。

通过以下方式使其成为 HTML/Java 中的 json：

var myVariable = {{ object_returned | tojson }};

引号被删除，因为它使它成为一个字符串。

最后：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: myVariable,

【讨论】：