How to "GET" object of arrays that is full of arrays and display in Flask jinja template

Question

I have code within my flask app that has displays a table of results from an mysql database.

Each of the items within the results has info including "title", "link", "date", "relevant".

Where relevant is a checkbox that is unticked.

If a user ticks the checkbox and clicks save changes, my flask app updated the mysql database giving a vlaue of 1 for relevant. This then redirects to the homepage which only selects entries from the database where relevant is 0 (and sent and displayed are 0 to).

Up to this part it works fine.

The part where I am having difficulties is that I have a button that when clicked invokes a button to refresh the sources (i.e. it scrapes for more article data) and this data is then inserted into the database table.

The problem arise when the redirect to home happens. It doesn't show the new articles on the web page. They are there in the db but not on the web page.

So I have decided to use jquery AJAX using a get request. However I am getting confused on how to pull the object-array into my jinja template?

Kenneth Love do you have any recommendations? This has been a real pain.

Below is my code;

my __init__.py

@app.route('/' , methods=['GET', 'POST'])
@login_required
def main():


    if request.method == 'POST':
    #    if 'RefreshSources' in request.form:
      #      try:
        #        InfoCrawler.callAll()# invoke the crawler
          #  except Exception as e:
            #    print('Error is :' + str(e))
            #else:
              #  return redirect('/')

        if 'SaveAll' in request.form:

            saved_data = request.form
            for x in range(20000):
                if str(x) + '|relevant' in saved_data:

                    try: 
                        country_id_sql = "SELECT CountryId FROM countries WHERE CountryName = %s"
                        cursor.execute(country_id_sql,(countryId),)
                        rows = cursor.fetchall()

                    except Exception as e:
                        raise e
                    else:
                        for row in rows:
                            countId = row['CountryId']


                    try:
                        update_relevant_sql = "UPDATE master SET relevant = %s, CountryId = %s WHERE id = %s"
                        cursor.execute(update_relevant_sql,(1,countId,x),)
                        dbDets[0].commit()
                    except Exception as e:
                        raise e
            flash('Changes successfully saved')
            return redirect('/')

 else:


        return render_template('tables.html')



@app.route('/_test',methods=['GET'])
def test():
   InfoCrawler.callAll()# invoke the crawler
    sql = "SELECT * FROM master WHERE displayed = %s AND sent = %s AND relevant = %s Order By date DESC"
    cursor.execute(sql,(0,0,0))
    rows = cursor.fetchall()
    return jsonify(data=rows)

here is what my tables.html file looks like

{% extends "home.html"%}
 {% block content %}

 <div id="scrollingDiv" align="center">

     {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul style="list-style:none; margin-right:10px;" align=right>
        {% for message in messages %}
            <li>{{ message }} </li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}

    <p><input type="submit" name="RefreshSources" id="test" value="Refresh sources"></p>

  <form action="/" method="post" role="form" >

     <table style="border =0; width= 50%; background-color=#f2f2f2;">
        <tr style="background: #f5f5f5;"> 

            <!--<th><p><input type="submit" name="RefreshSources"  value="Refresh sources"></p></th>-->
            <th><p><input type="submit" name="GenEmail" value="Generate email"></p></th>
            <th><p><input type="submit" name="SendEmail" value="Send email" ></p></th>
            <th><p><input type="submit" name="EmailPreview" value="Email preview" ></p></th>
            <th><p><input type="submit" name="EditEmail" value="Edit Email" ></p></th>
            <th style="width:65%; margin-right:10px;", align="right"><p><input type="submit" name="SaveAll" value="Save changes"></p></th>
        </tr>
    </table>
 </div>



    <div id ="main" align= "center">

        {% for x in data %}

          <table id = "table_body">
           <tr>
            <td width ="100">
            <p><b>Company</b></p>
            </td>
            <td>
            <p>{{ x.company }}</p>
            </td>
           </tr>
           <tr>
            <td>
            <p><b>Date</b></p>
            </td>
            <td>
            <p>{{ x.date }}</p>
            </td>
           </tr>
           <tr>
            <td>
            <p><b>Details</b></p>
            </td>
            <td>
            <p>{{ x.info }}</p>
            </td>
           </tr>
           <tr>
            <td>
            <p><b>Link</b></p>
            </td>
            <td>
            <p><a href={{ x.link }}  target="_blank">More details</a></p>
            </td>
           </tr>
             <tr>
            <td>
            <p><b>Is relevant?</b></p>
            </td>
            <td>
                <input type="checkbox" name="{{ x.id }}|relevant" id="{{ x.id }}|releid" value="is relevant"/>

             </td>
            </tr>
            <tr>

                <input type="hidden" name="{{ x.id }}|company" id="{{ x.id }}|comp" value="{{ x.company }}" />
                <input type="hidden" name="{{ x.id }}|date" id="{{ x.id }}|da" value="{{ x.date }}" />
                <input type="hidden" name="{{ x.id }}|info" id="{{ x.id }}|in" value="{{ x.info }}" />
                <input type="hidden" name="{{ x.id }}|link" id="{{ x.id }}|li" value="{{ x.link }}" />
            </tr>
        </table>
        {% endfor %}
    </div>


  </form>


{% endblock %}

here is a small chunk of my home.html showing the jquery ajax code I have used

<head>
<title>Data</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(function (){
    $("#test").click(function() {
        $.ajax({
           type:'GET',
           url:'/_test',
           success: function(data){
               console.log('success',data); //how to use this data in template
           }

        });

    }); 

});

</script>

This does log the data, but am getting really confused on how to use it within my template!

I have commented out my initial "RefreshSources" submit input as this was within my form that did not work.

The commented out code within my __init__.py is the code I used before hand that wasn't working.

Welcome to the Treehouse Community

Looking to learn something new?

Mayur Pande

Mayur Pande

How to "GET" object of arrays that is full of arrays and display in Flask jinja template