title: Render Jinja after jQuery AJAX request to Flask
body: <p>I have a web application that gets dynamic data from <strong>Flask</strong> when a <strong>select</strong> element from HTML is changed. of course that is done via <strong>jquery ajax</strong>. No probs here I got that.</p>
  
  <p>The problem is, the dynamic data <strong>- that is sent by Flask -</strong>, is a list of objects from the database <strong>Flask-sqlalchemy</strong>.</p>
  
  <p>Of course the data is sent as <strong>JSON</strong> from <strong>Flask</strong>.</p>
  
  <p>I'd like to iterate through those objects to display their info using <strong>Jinja</strong>.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;select id="#mySelect"&gt;
      &lt;option value="option1" id="1"&gt;Option 1 &lt;/option&gt;
      &lt;option value="option2" id="1"&gt;Option 2 &lt;/option&gt; 
      &lt;option value="option3" id="3"&gt;Option 3 &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <h2>jQuery</h2>
  
  <pre><code>$('body').on('change','#mySelect',function(){
     var option_id = $('#mySelect').find(':selected').attr('id');
     $.ajax({
       url: "{{ url_for('_get_content') }}",
       type: "POST",
       dataType: "json",
       data: {'option_id':option_id},
       success: function(data){
         data = data.data;
        /* HERE I WANT TO ITERATE THROUGH THE data LIST OF OBJECTS */
       }
  
     });
  });
  </code></pre>
  
  <h2>Flask</h2>
  
  <pre><code>@app.route('/_get_content/')
  def _get_content():
      option_id = request.form['option_id']
      all_options = models.Content.query.filter_by(id=option_id)
      return jsonify({'data': all_options})
  </code></pre>
  
  <h3>PS : I know that jinja gets rendered first so there is no way to assign jQuery variables to Jinja. So how exactly am I going to iterate through the data list if I can't use it in Jinja ?</h3>