How to return a list from HTML template to Python Flask application

Question

I am new to Python Flask. I want to update a list in HTML template and return it to the Python Flask application. So far, I send the list from flask app to the HTML template and display it.

Flask App:

return render_template('er_draw.html', relationship_data=relationship_data)

HTML template:

{% for data in relationship_data %}

    <div class="form-row">

        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['entity1'] }}">
        </div>
        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['entity2'] }}">
        </div>
        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['relationship'] }}">
        </div>
        <div class="form-group col-md-2">
            <select id="inputState" class="form-control">
                {% if data['cardinality'] == 'one_to_one' %}
                    <option selected>One to One</option>
                {% else %}
                    <option>One to One</option>
                {% endif %}
                {% if data['cardinality'] == 'one_to_many' %}
                    <option selected>One to Many</option>
                {% else %}
                    <option>One to Many</option>
                {% endif %}
                {% if data['cardinality'] == 'many_to_many' %}
                    <option selected>Many to Many</option>
                {% else %}
                    <option>Many to Many</option>
                {% endif %}
            </select>
        </div>
        <div class="col-auto">
            <a href="#">
                <button type="submit" class="btn btn-primary mb-2" name="submit_button" id="update_list"
                        value="update_list">Update
                </button>
            </a>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2" name="submit_button" value="delete_item">Delete
            </button>
        </div>
    </div>
{% endfor %}

When I click the update button I want to update the relationship_data list and return it back to the Flask application. In order to achieve this, I wrote AJAX request code (but I have no clear idea about that).

    <script>
    let relationship_data;
    $.ajax({
    url: "/list_change",
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    data: JSON.stringify({html_data: relationship_data}),
    success: function(response) {
        console.log(response);
    },
});
</script>

I create a new endpoint in Flask application.

@app.route('/list_change', methods=['POST'])
def list_change():
    if request.method == 'POST':
        if request.form['submit_btn'] == 'update_list':
            data = request.get_json()
            print(data['html_data'])

However, I do not how can I access relationship_data list in Javascript is there any method to do that?

Answer 1

Context: Flask uses Jinja in order to generate your page from your HTML template which is represented by your code. In consequence, your screenshot of the application is the already rendered page having filled the {% variable} from the data provided by Flask. From the rendered point onward the page behaves like an usual "webpage".

Answer to question: You have different options to achieve your desired goal. For instance, you can implement a corresponding javascript function for your button press. This function generates an Ajax request which is sent to a new "endpoint" of your Flask application (you need to specify the endpoint yourself). This endpoint processes the information (update the relationship_data for your purpose) and sends it back. The javascript function then processes the received information and updates your page with the new content. In short, you have a mix of javascript implementations alongside setup requirements for your Flask