es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pasando una lista a una plantilla de botella, luego utilizando esta lista en un

05 Aug, 2023 Programación

Estoy utilizando Bottle para un sitio web de una sola página muy simple. En mi ruta para ‘/’, tengo algo así:

@app.route('/')
def index():
   data = [['A', 1], ['B', 2], ['C', 3]]
   return template('index.tpl', data=data)

Luego, en mi plantilla index.tpl, quiero usar estos datos en un script que se encuentra en <head>:

<head>
    <script type="text/javascript">
       function doSomething(some_data) {
          return some_data[0];
       }

       function myFunc() {
          var test = doSomething({{data}});
          console.log(test);
       }
    </script>
</head>

Sin embargo, esta línea: doSomething({{data}}) causa un error de sintaxis: “se esperaba ‘,’; se esperaba una declaración o sentencia”.

La única forma que tengo de solucionarlo es agregar comillas de esta manera: doSomething('{{data}}'), pero entonces se vuelve completamente inútil porque ahora es una cadena de texto y tengo que convertirla de nuevo al formato que necesito.

He visto muchas soluciones en StackOverflow que usan {{data}} directamente en JS sin necesitar comillas, así que no entiendo por qué no funciona para mí. ¿Es esto debido a donde se encuentra mi script?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema probablemente se debe al hecho de que data es una lista de listas, pero en la plantilla no se está pasando como JSON, por lo que JavaScript no puede interpretarlo correctamente.

    Para resolver este problema, puedes pasar data como un objeto JSON, que se puede interpretar fácilmente en JavaScript.

    Aquí tienes una función index actualizada:

    import json

@app.route('/')
def index():
    data = [['A', 1], ['B', 2], ['C', 3]]
    json_data = json.dumps(data)
    return template('index.tpl', json_data=json_data)

    Y en la plantilla index.tpl:

    <head>
    <script type="text/javascript">
        function doSomething(some_data) {
            return some_data[0];
        }

        function myFunc() {
            var test = doSomething(JSON.parse('{{json_data}}'));
            console.log(test);
        }
    </script>
</head>

    Ten en cuenta que ahora estamos pasando json_data a la plantilla, que es una versión serializada en JSON de data. En el script, primero analizamos esta cadena JSON utilizando JSON.parse para obtener el objeto data original, que luego se puede pasar a doSomething.

Comments are closed.