Как передать данные из Flask в JavaScript в шаблоне?

124

Мое приложение обращается к API, который возвращает словарь. Я хочу передать информацию из этого dict в JavaScript в представлении. Я использую API Карт Google в JS, в частности, поэтому я хотел бы передать ему список кортежей с информацией long / lat. Я знаю, что render_templateэти переменные будут переданы в представление, чтобы их можно было использовать в HTML, но как я могу передать их в JavaScript в шаблоне?

from flask import Flask
from flask import render_template

app = Flask(__name__)

import foo_api

api = foo_api.API('API KEY')

@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)

— теа
источник

141

Вы можете использовать в {{ variable }}любом месте вашего шаблона, а не только в части HTML. Итак, это должно работать:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

Думайте об этом как о двухэтапном процессе: во-первых, Jinja (шаблонизатор, который использует Flask) генерирует ваш текстовый вывод. Он отправляется пользователю, который выполняет видимый им JavaScript. Если вы хотите, чтобы ваша переменная Flask была доступна в JavaScript в виде массива, вам необходимо сгенерировать определение массива в вашем выводе:

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

Jinja также предлагает более сложные конструкции из Python, поэтому вы можете сократить его до:

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

Вы также можете использовать forциклы, ifоператоры и многое другое, см. Документацию Jinja2 .

Также посмотрите ответ Форда, который указывает на tojsonфильтр, который является дополнением к стандартному набору фильтров Jinja2. .

Изменить ноябрь 2018: tojsonтеперь включен в стандартный набор фильтров Jinja2.

— MENSI
источник

2

Очень признателен, менси! Это было моей первоначальной мыслью, но в документации по Flask не ясно, что вы также можете использовать форму {{var}} в JS. Спасибо, что прояснили это.

— mea

2

@mea: вы также можете использовать механизм шаблонов для создания произвольных текстовых файлов, я также использовал его для динамического создания файлов TeX (-> PDF) и электронной почты, он довольно универсален;)

— mensi

быстрый ответ на вопрос: если я выполняю цикл for в JS, могу ли я использовать индексную переменную в переменной python, например {{geocode [i]}}?

— MEA

1

Это имеет смысл, но решение, которое вы опубликовали, похоже, требует, чтобы я вручную кодировал содержимое массива JS. Я надеялся, что смогу сделать это более программно, так что я смогу передать список Python переменной длины, а цикл JS for может выполнять итерацию по длине, а затем добавлять их в массив JS. Извините, если я недостаточно ясно выражаюсь, но я довольно зеленый для JS и веб-разработчиков.

— MEA

1

@RocketPingu, если вы хотите передать данные в отдельном файле, обычно проще использовать jsonмодуль для

— выгрузки

114

Идеальный способ превратить практически любой объект Python в объект JavaScript - использовать JSON. JSON - отличный формат для передачи данных между системами, но иногда мы забываем, что это означает JavaScript Object Notation. Это означает, что внедрение JSON в шаблон аналогично внедрению кода JavaScript, описывающего объект.

Flask предоставляет для этого фильтр Jinja: tojsonвыгружает структуру в строку JSON и отмечает ее как безопасную, чтобы Jinja не экранировал ее автоматически.

<html>
  <head>
    <script>
      var myGeocode = {{ geocode|tojson }};
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

Это работает для любой структуры Python, сериализуемой в формате JSON:

python_data = {
    'some_list': [4, 5, 6],
    'nested_dict': {'foo': 7, 'bar': 'a string'}
}

var data = {{ python_data|tojson }};
alert('Data: ' + data.some_list[1] + ' ' + data.nested_dict.foo + 
      ' ' + data.nested_dict.bar);

— брод
источник

4

Попробуйте это в следующий раз, когда войдете Uncaught SyntaxError: Unexpected token &в консоль javascript.

— scharfmn 05

8

Я считаю этот ответ более убедительным и логичным, чем принятый.

— Конрад

Я получил ошибку при запуске кода:TypeError: Object of type Undefined is not JSON serializable

— jbuddy_13

27

Использование атрибута данных в элементе HTML позволяет избежать использования встроенных сценариев, что, в свою очередь, означает, что вы можете использовать более строгие правила CSP. для повышения безопасности.

Укажите атрибут данных следующим образом:

<div id="mydiv" data-geocode='{{ geocode|tojson }}'>...</div>

Затем откройте его в статическом файле JavaScript, например:

// Raw JavaScript
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);

// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));

— mcote
источник

11

В качестве альтернативы вы можете добавить конечную точку для возврата вашей переменной:

@app.route("/api/geocode")
def geo_code():
    return jsonify(geocode)

Затем выполните XHR, чтобы получить его:

fetch('/api/geocode')
  .then((res)=>{ console.log(res) })

— Винни Джеймс
источник

Да, вы могли бы , и в некоторых архитектурах (особенно в SPA) это правильный способ делать что-то, но имейте в виду, что у этого есть несколько недостатков по сравнению с записью данных на странице, когда вы ее обслуживаете: 1. это медленнее, 2. требуется немного больше кода, даже если он работает небрежно, и 3. он вводит как минимум два дополнительных состояния внешнего интерфейса, которые вам, вероятно, нужно будет аккуратно обработать в своем пользовательском интерфейсе (а именно, состояние, в котором запрос XHR все еще находится в процессе , и тот, где он полностью потерпел неудачу), что требует кучи дополнительного кода JavaScript и вводит дополнительный источник потенциальных ошибок.

— Марк Эмери

3

Еще одно альтернативное решение для тех, кто хочет передавать переменные в скрипт, полученный с помощью flask, мне удалось заставить это работать, только определив переменные снаружи, а затем вызвав скрипт следующим образом:

    <script>
    var myfileuri = "/static/my_csv.csv"
    var mytableid = 'mytable';
    </script>
    <script type="text/javascript" src="/static/test123.js"></script>

Если я введу переменные jinja, test123.jsэто не сработает, и вы получите сообщение об ошибке.

— tsando
источник

Именно то, что я искал.

— shrishinde

1

-1; этот ответ не имеет смысла. Я думаю (основываясь на фразе «сценарий, созданный с использованием flask» и вашем очевидном ожидании, что вы сможете использовать переменные шаблона /static/test123.js), что вы неправильно понимаете, как работает <script>s with src. Это не функция Flask. Браузер , когда он разбирает такой сценарий, делает отдельный запрос HTTP , чтобы получить сценарий. Содержимое скрипта не запекается в шаблоне Flask; действительно, Flask, скорее всего, завершил отправку шаблонного HTML в браузер к тому моменту, когда браузер даже запросит скрипт.

— Марк Эмери

3

Рабочие ответы уже даны, но я хочу добавить проверку, которая действует как отказоустойчивая, если переменная flask недоступна. Когда вы используете:

var myVariable = {{ flaskvar | tojson }};

если есть ошибка, из-за которой переменная не существует, возникающие ошибки могут привести к неожиданным результатам. Чтобы этого избежать:

{% if flaskvar is defined and flaskvar %}
var myVariable = {{ flaskvar | tojson }};
{% endif %}

— Патрик Мутуку
источник

2

<script>
    const geocodeArr = JSON.parse('{{ geocode | tojson }}');
    console.log(geocodeArr);
</script>

Он использует jinja2 для превращения кортежа геокода в строку json, а затем javascript JSON.parseпревращает это в массив javascript.

— nackjicholson
источник

1

Почему бы вам просто не сериализовать json в python

— Mojimi

0

Что ж, у меня есть хитрый метод для этой работы. Идея заключается в следующем:

Сделайте несколько невидимых HTML-тегов, например <label>, <p>, <input> и т. Д., В теле HTML и создайте шаблон в идентификаторе тега, например, используйте индекс списка в идентификаторе тега и значение списка в имени класса тега.

Здесь у меня есть два списка maintenance_next [] и maintenance_block_time [] одинаковой длины. Я хочу передать эти два списка данных в javascript с помощью колбы. Итак, я беру какой-то невидимый тег label и устанавливаю его имя тега как образец индекса списка и устанавливаю его имя класса как значение в index.

{% for i in range(maintenance_next|length): %}
<label id="maintenance_next_{{i}}" name="{{maintenance_next[i]}}" style="display: none;"></label>
<label id="maintenance_block_time_{{i}}" name="{{maintenance_block_time[i]}}" style="display: none;"></label>
{% endfor%}

Развернуть фрагмент

После этого я получаю данные в javascript, используя простую операцию javascript.

<script>
var total_len = {{ total_len }};

for (var i = 0; i < total_len; i++) {
    var tm1 = document.getElementById("maintenance_next_" + i).getAttribute("name");
    var tm2 = document.getElementById("maintenance_block_time_" + i).getAttribute("name");
    
    //Do what you need to do with tm1 and tm2.
    
    console.log(tm1);
    console.log(tm2);
}
</script>

Развернуть фрагмент

— Танмой Датта
источник

-1

Некоторые файлы js поступают из Интернета или библиотеки, они не написаны вами. Код они получают такие переменные:

var queryString = document.location.search.substring(1);
var params = PDFViewerApplication.parseQueryString(queryString);
var file = 'file' in params ? params.file : DEFAULT_URL;

Этот метод делает файлы js неизменными (сохраняя независимость) и правильно передает переменную!

— jayzhen
источник