Estoy tratando de visualizar un montón de datos en formato JSON por p5js con un servidor organizado por Flask.
Supongamos que tengo un archivo JSON data.json
[{"a":"1"},{"b":"2"},{"c","3"}]Y mi código Python es:
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)Hasta ahora descubrí cómo enviar mi archivo JSON a HTML, pero ¿cómo leer el archivo JSON en HTML a través de p5js? Aquí está mi código HTML:
<!DOCTYPE html> <html> <head> <script src="js/p5.js"></script> <script src="sketch.js"></script> </head> <body> Hello </body> </html> Al principio, en realidad, parece que, en Flask, HTML no puede leer p5.js y sketch.js correctamente. El código de error es Failed to load resource: the server responded with a status of 404 (NOT FOUND)
En segundo lugar, puedo abrir el archivo JSON en HTML mediante {{data_json}} , pero ¿cómo puedo transmitirlo a sketch.js para que pueda usarse para la visualización?
¿Qué debo hacer para arreglarlo? ¡Realmente aprecio tu ayuda!
Idealmente, su JavaScript haría sus propias solicitudes HTTP para los datos a través de la API Fetch. Esto le permite almacenar en caché el HTML, manteniendo esos datos separados.
Sin embargo, en algunos casos, tiene sentido construir los datos directamente en el HTML. Para estos momentos, puede usar una etiqueta de secuencia de comandos y serializar los datos como JSON nuevamente, dentro de esa etiqueta de secuencia de comandos.
Entonces, en tu plantilla:
<script> const data = /* your code to serialize and output data here */; </script> Esto configura los data de la variable global, a los que se puede acceder desde sus otros scripts. El uso de la serialización JSON garantiza que sus datos sean compatibles con JavaScript, sin tener que preocuparse por ningún escape adicional. Es decir, el motor de JavaScript puede interpretar los datos serializados como JSON, y los datos no se filtrarán como un script arbitrario.
En realidad, no necesita Python ni bibliotecas. Puedes usar esta función:
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; } y obtener el contenido de un archivo. usa JSON.parse() para convertirlo en un objeto:
let variable = JSON.parse(readTextFile('info.json')) document.getElementById('hi').innerHTML = variable; html: <p id='hi'></p>
su html debe mostrar el objeto.