¿Cómo acceder a una matriz (JSON) en el JavaScript de front-end que fue pasado por Python (Flask)?

Soy un noobie real usando el marco de Flask (y cliente-servidor en general), así que tengan paciencia. Tengo un archivo de plantilla HTML básico con un poco de Flask (usa la notación {% …%}) pasando un objeto JSON desde un archivo python. En este momento, como una simple comprobación de cordura, está emitiendo el contenido de los motifs (una matriz de matrices) como líneas separadas (

  • ) en una lista desordenada (
      ).

      Lo que quiero que haga en su lugar es usar la matriz de matrices de motifs en un script de JavaScript como datos para una visualización que estoy tratando de hacer. Intenté mezclar la secuencia de comandos de Flask en una etiqueta JavaScript que itera una matriz de JavaScript, pero obtuve el error de que a la etiqueta de secuencia de comandos no le gustaba la notación de Flask ( Uncaught SyntaxError: Unexpected token } . ¿Un script para desechar el conjunto para usarlo en un script de JavaScript? Me doy cuenta de que puedo estar malinterpretando algunas cosas aquí (¿quizás la naturaleza de JSON?). Agradecería cualquier empujón en la dirección correcta. ¡Gracias!

      A continuación, he incluido mi plantilla html con el script Flask creando la lista desordenada, también he incluido mi bash fallido de usar el script Flask en una etiqueta . Entonces, ¿cómo accedo con éxito a la matriz (JSON) en un JavaScript?

      index.html (un archivo de plantilla, simplificado aquí para mayor claridad):

            

      Here are some motifs:

        {% for motif in motifs %}
      • {{motif}}
      • {% endfor %}
      one of a few js scripts

      La salida del archivo anterior se ve así (faltan los puntos que no se copiaron):

      Aquí hay algunos motivos:

      {‘gene1’: 1, ‘gene2’: 1, ‘gene3’: 7, ‘gene4’: 7, ‘gene5’: 1}

      {‘gene1’: 7, ‘gene2’: 4, ‘gene3’: 10, ‘gene4’: 5, ‘gene5’: 2}

      {‘gene1’: 7, ‘gene2’: 1, ‘gene3’: 8, ‘gene4’: 5, ‘gene5’: 8}

      {‘gene1’: 2, ‘gene2’: 4, ‘gene3’: 6, ‘gene4’: 1, ‘gene5’: 9}

      {‘gene1’: 3, ‘gene2’: 8, ‘gene3’: 2, ‘gene4’: 7, ‘gene5’: 8}

      {‘gene1’: 1, ‘gene2’: 5, ‘gene3’: 1, ‘gene4’: 9, ‘gene5’: 5}

      {‘gene1’: 3, ‘gene2’: 5, ‘gene3’: 6, ‘gene4’: 10, ‘gene5’: 9}

      {‘gene1’: 2, ‘gene2’: 10, ‘gene3’: 7, ‘gene4’: 5, ‘gene5’: 10}

      {‘gene1’: 5, ‘gene2’: 5, ‘gene3’: 10, ‘gene4’: 10, ‘gene5’: 5}

      {‘gene1’: 10, ‘gene2’: 4, ‘gene3’: 4, ‘gene4’: 6, ‘gene5’: 4}

      A continuación se muestra mi bash fallido de acceder en un la matriz (objeto JSON) pasada por Flask:

        var motifValuesArray = []; var index = 0; // an iterator to assign indexes in the javascript array {% for motif in motifs %} motifValuesArray[index] = {motif}; console.log(motifValuesArray[index]); {% endfor %}  

      Entonces, la razón por la que su bash de falló fue porque está intentando ejecutar el código jinja2 (el motor de plantillas que viene con el matraz por defecto) en el navegador web. El navegador web no tiene un intérprete de python y mucho menos un motor de plantillas que se construye sobre python.

      Dicho esto, hay varias formas en las que puede obtener una matriz JSON desde el matraz al cliente. Probablemente la forma más sencilla es pasar la matriz como HTML directo y analizar el html. Pero eso no es muy hábil y puede ser muy lento si la matriz se vuelve muy grande.

      Solo para ser minucioso, esta respuesta de SO pasa por cómo hacer las cosas directamente desde jinja2.

      Para mi ejemplo, voy a crear una función javascript que se llama en la carga de la página. Esta función javascript realiza una llamada ajax a la aplicación del matraz, recibe una matriz en formato JSON y, finalmente, analiza el objeto para devolver la matriz.

      Javascript

       $(document).ready(function() { var request = $.ajax({ type: "POST", url: "/example_array/", data: {"name":""}, // if you wanted to specifiy what list then pass an actual name dataType: "html" }); request.done(function(JSON_array) { array_data = JSON.parse(JSON_array)["array"] //from here you have your array to play with }); }); 

      archivo matraz

       from flask import jsonify @app.route("/example_array/") def example(): list = get_list() # however you get your list data, put it here return jsonify(array=list) @app.route("/") def index(): return render_template("home_page.html") 

      Use json.dumps para asegurarse de que sus diccionarios de motivos sean JSON adecuados.

       try: import simplejson as json except: import json ... motifValuesArray[index] = {{json.dumps(motif)}};