title: How to return a list from HTML template to Python Flask application
body: <p>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.</p>
  
  <p>Flask App:</p>
  
  <pre><code>return render_template('er_draw.html', relationship_data=relationship_data)
  </code></pre>
  
  <p>HTML template:</p>
  
  <pre><code>{% for data in relationship_data %}
  
      &lt;div class="form-row"&gt;
  
          &lt;div class="form-group col-md-2"&gt;
              &lt;input type="text" placeholder="{{ data['entity1'] }}"&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-md-2"&gt;
              &lt;input type="text" placeholder="{{ data['entity2'] }}"&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-md-2"&gt;
              &lt;input type="text" placeholder="{{ data['relationship'] }}"&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-md-2"&gt;
              &lt;select id="inputState" class="form-control"&gt;
                  {% if data['cardinality'] == 'one_to_one' %}
                      &lt;option selected&gt;One to One&lt;/option&gt;
                  {% else %}
                      &lt;option&gt;One to One&lt;/option&gt;
                  {% endif %}
                  {% if data['cardinality'] == 'one_to_many' %}
                      &lt;option selected&gt;One to Many&lt;/option&gt;
                  {% else %}
                      &lt;option&gt;One to Many&lt;/option&gt;
                  {% endif %}
                  {% if data['cardinality'] == 'many_to_many' %}
                      &lt;option selected&gt;Many to Many&lt;/option&gt;
                  {% else %}
                      &lt;option&gt;Many to Many&lt;/option&gt;
                  {% endif %}
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="col-auto"&gt;
              &lt;a href="#"&gt;
                  &lt;button type="submit" class="btn btn-primary mb-2" name="submit_button" id="update_list"
                          value="update_list"&gt;Update
                  &lt;/button&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-auto"&gt;
              &lt;button type="submit" class="btn btn-primary mb-2" name="submit_button" value="delete_item"&gt;Delete
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YjC0s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YjC0s.png" alt="Output:"></a></p>
  
  <p>When I click the update button I want to update the <em>relationship_data</em> 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). </p>
  
  <pre><code>    &lt;script&gt;
      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);
      },
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I create a new endpoint in Flask application.</p>
  
  <pre><code>@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'])
  </code></pre>
  
  <p>However, I do not how can I access relationship_data list in Javascript is there any method to do that?</p>