Как передать переменную из Flask в JavaScript?

Question

[lrv]

Добрый день.

У меня есть класс:

class Test(db.Model):

    __tablename__ = 'test'
    __table_args__ = {'schema': 'test_temp'}

    a = db.Column(db.String, primary_key=True)
    b = db.Column(db.Integer, nullable=False)

    def __init__(self, a, b):
        self.a = a
        self.b = b

    def __repr__(self):
        return '[\'a\': \'{}\', \'b\': {}]'.format(self.a, self.b)

    def as_dict(self):
        return {'a': self.a, 'b': self.b}

И функция, которая возвращает JSON:

@example.route('/report_example', methods=['GET'])
def example():
    result = Test.query.all()
    result_dict = [r.as_dict() for r in result]
    return render_template("static/example.html", result_dict=json.dumps(result_dict))

Как мне передать результат в JavaScript и сохранить его в переменную ?
В HTML все просто делается, через "{{result}}", а JavaScript это что то не срабатывает.
Помогите, пожалуйста.

Comments

[Сослан Хлоев]

ajax не катит?

[lrv]

Ajax никогда не использовал, а как примерно это будет выглядеть ?

[Сергей Горностаев]

Приведённая функция не возвращает json. Кроме того, в ней непонятно зачем используется redirect(url_for('index.example')).

[lrv]

Сергей Горностаев, поправил, теперь возвращает json.

[Арслан Исаев]

А можно посмотреть example.html?

[iddqda]

ajax не модно уже
сейчас используют fetch

и со стороны фляги конечно никакого render. Он отдает mimetype html
в результате браузер дропнет старую страницу вместе с JS-скриптом и попытается изобразить новый html
чтоб отдать json с нужным mimetype application/json в фляге есть специальный метод jsnonify

from flask import jsonify
return jsonify(result_dict)

рабочий пример вынес в отдельный ответ

[lrv]

Арслан Исаев,

{% block content %}
    <div class="demo-container">
        {{tender_status_dict}}
        <div id="chart-demo">
            <div id="pie"></div>
            <div class="options">
                <div class="caption">Options</div>
                <div class="option">
                    <span>Label Overlapping Resolution Mode</span>
                    <div id="types"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

Answer 1

[iddqda]

Вот так примерно

html:

<div>
    <button id="jsfetch">fetch json</button>
  </div>

js:

document.querySelector("#jsfetch").addEventListener("click", Handler);
function Handler(event) {
    fetch('/api')
        .then((response) => {
            return response.json();
        })
        .then((myjson) => {
            console.log(myjson);
        });
}

flask:

from flask import jsonify
data = { 
    "id": 123,
    "name": "Вася",
    "surname": "Пупкин"
}

@app.route('/api')
def api():
    return jsonify(data)

Запускаешь, нажимаешь на кнопку и видишь в консоли браузера:

Object { id: 123, name: "Вася", surname: "Пупкин" }