将 JSON 数据从 Flask 传递到模板中的 JavaScript答案

【问题标题】：Pass JSON data from Flask to JavaScipt in the template将 JSON 数据从 Flask 传递到模板中的 JavaScript
【发布时间】：2020-06-05 15:03:27
【问题描述】：

我正在尝试将 JSON 格式的列表从我的烧瓶服务器传递到我的 HTML 中，以便可以使用 p5.js 显示它，但我无法让数据传递过来

from flask import Flask, request, jsonify, render_template, url_for
import json
from random import randint
app = Flask(__name__)

COLUMNS = 8
ROWS = 8
NUMBER_OF_TILES = 7

def build_board():
    #Setting all elements to 1 initially
    board = [[1]*COLUMNS for i in range(ROWS)]
    #Creating a random board with zero matches to begin
    for r in range(ROWS):
        for c in range(COLUMNS):
            board[r][c] = randint(1, NUMBER_OF_TILES)
            while (r>0 and board[r][c] == board[r - 1][c]) or (c > 0 and board[r][c] == board[r][c - 1]):
                board[r][c] = randint(1, NUMBER_OF_TILES) 
    return board  

@app.route('/', methods=["POST", "GET"])
def index():
    if request.method == "POST":
        data = json.dumps(build_board())
        return render_template('index.html', data=data)
    else:
        return render_template('index.html')

if __name__ == "__main__":
    app.run(debug = True)

所以这是烧瓶端，然后是 html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{{url_for('static', filename='js/p5.js')}}"></script>
    
    
    <title>Document</title>
</head>
<body>
    <form method="POST">
        <input type='submit' value="Start Game" >
    </form>
    <script type='application/javascript'>
    var json = {data}
    var array = JSON.parse(json)

下面还有更多，但与问题无关

【问题讨论】：

标签： javascript json flask post

【解决方案1】：

在 Jinja 模板中渲染变量时，应该使用双大括号。另外，请记住使用tojson 过滤器 (doc) 将您的数据转换为模板中 JavaScript 的 JSON 格式：

var json = {{ data|tojson }}

【讨论】：