online - JavaScript genera SyntaxError con datos representados en la plantilla Jinja

mustache template system

Question

Estoy tratando de pasar datos como JSON desde una ruta Flask a una plantilla Jinja que representa JavaScript. Quiero iterar sobre los datos usando JavaScript. El navegador muestra SyntaxError: Unexpected token ''&''. Expected a property name. SyntaxError: Unexpected token ''&''. Expected a property name. cuando se llama a JSON.parse en los datos representados. ¿Cómo uso los datos JSON renderizados en JavaScript?

var obj = JSON.parse({{ data }})
for (i in obj){
   document.write(obj[i].text + "<br />");
}

def get_nodes(node):
    d = {}
    if node == "Root":
        d["text"] = node
    else:
        d["text"] = node.name

    getchildren = get_children(node)
    if getchildren:
        d["nodes"] = [get_nodes(child) for child in getchildren]
    return d

tree = get_nodes("Root")
return render_template("folder.html", data=tree)

Si acabo de poner {{ data }} en la parte HTML, lo que veo parece correcto.

{''text'': ''Root'', ''nodes'': [{''text'': u''Prosjekt3''}, {''text'': u''Prosjekt4'', ''nodes'': [{''text'': u''mappe8''}]}]}

Answer 1

El entorno Jinja de Flask escapa automáticamente a los datos representados en las plantillas HTML. Esto es para evitar problemas de seguridad si el desarrollador intenta representar la entrada del usuario no confiable.

Dado que está pasando un objeto de Python para que sea tratado como JSON, Flask proporciona el filtro tojson que automáticamente descarga los datos a JSON y los marca como seguros.

return render_template(''tree.html'', tree=tree)

var tree = {{ tree|tojson }};

Cuando solo mira los datos representados en HTML, parece correcto porque el navegador muestra los símbolos escapados como símbolos reales (aunque en este caso está viendo la representación de cadena de un dict Python, no JSON, por lo que todavía hay algunos problemas como marcadores u )

Las versiones anteriores de Flask no marcaban los datos volcados como seguros, por lo que podría encontrar ejemplos como {{ tree|tojson|safe }} , que ya no es necesario.

Si no está representando JSON (o si ya ha volcado el JSON en una cadena), puede decirle a Jinja que los datos son seguros de procesar sin escapar utilizando el filtro safe .

# already dumped to json, so tojson would double-encode it
return render_template(''tree.html'', tree=json.dumps(tree))

var tree = {{ tree|safe }};

También puede ajustar la cadena en Markup antes de representarla, es equivalente al filtro safe .

# already dumped and marked safe
return render_template(''tree.html'', tree=Markup(json.dumps(tree)))

var tree = {{ tree }};

Si no pasa estos datos a JavaScript, sino que los usa en Jinja, no necesita JSON. Pase los datos reales de Python, no llame a tojson y tojson como lo haría con cualquier otro dato de la plantilla.

return render_template(''tree.html'', tree=tree)

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}

Answer 2

El problema es que su servidor no devuelve JSON, sino que representa HTML, que escapa a algunos de los símbolos con & notación.

En lugar de usar

return render_template("folder.html", data=tree)

tratar

return flask.jsonify(**tree)