[英]How to read JSON file and transmit to Javascript in HTML organized by Flask?
我正在嘗試通過 p5js 使用由 Flask 組織的服務器以 JSON 格式可視化一堆數據。
假設我有一個 JSON 文件data.json
[{"a":"1"},{"b":"2"},{"c","3"}]
而我的 Python 代碼是：
from flask import *
app = Flask(__name__)
def index():
data_list = json.load(open('data.json'))
data_json = json.dumps(data_list)
return render_template("index.html", data_json=data_json)
if __name__ == '__main__':
app.run(port=7775)
到目前為止，我想出了如何將我的 JSON 文件發送到 HTML，但是如何讀取 JSON 文件到 Z4C4ZDBAD5FCAjsED0381A3F 中的 JSON 文件？ 這是我的 HTML 代碼：
<!DOCTYPE html>
<html>
<head>
<script src="js/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
Hello
</body>
</html>
起初，實際上，在 Flask 中，HTML 似乎無法正確讀取p5.js和sketch.js 。 錯誤代碼是Failed to load resource: the server responded with a status of 404 (NOT FOUND)
其次，我可以通過{{data_json}}打開 HTML 中的 JSON 文件，但是如何傳輸到sketch.js以便它可以用於可視化？
我應該怎么做才能修復它？ 非常感謝您的幫助！
理想情況下，您的 JavaScript 將通過獲取 API 對數據發出自己的 HTTP 請求。 這允許您緩存 HTML，同時保持數據分離。
但在某些情況下，將數據直接構建到 HTML 中確實有意義。 對於這些時候，您可以使用腳本標簽並在該腳本標簽內再次將數據序列化為 JSON。
因此，在您的模板中：
<script>
const data = /* your code to serialize and output data here */;
</script>
這將設置全局變量data ，您可以從其他腳本訪問該變量。 使用 JSON 序列化可確保您的數據與 JavaScript 兼容，而無需擔心任何額外的 escaping。 即序列化為JSON的數據可以被JavaScript引擎解釋，數據不會作為任意腳本泄露出去。
It's not easy passing python template data to javascript directly so what most people do to achieve the implementation of the functionality of retrieving data is by assigning it to a given html element and querying the element using javascript.
你可以簽出這個答案 回答了一個類似的問題
實際上，您不需要任何 python 或庫。 您可以使用這個 function：
function readTextFile(file){
let rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
let txt = '';
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
txt = allText;
}
}
}
rawFile.send(null);
return txt;
}
並獲取文件的內容。 使用JSON.parse()將其變成 object：
let variable = JSON.parse(readTextFile('info.json'))
document.getElementById('hi').innerHTML = variable;
html： <p id='hi'></p>
您的 html 應該顯示 object。
如何使用JSON轉換和傳輸PHP變量數據到HTML頁面的Javascript
[英]How to convert and transmit PHP Variable data Using JSON to HTML page's Javascript
如何將外部JSON文件讀取到我的html / javascript測驗中
[英]how to read a external JSON file into my html/javascript quiz
如何讀取 Javascript 中的 JSON 文件並將其轉換為 object
[英]How to read a JSON file in Javascript and transform it to an object
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.