Flask and HTML, from python dictionary to HTML table iteratively

Question

I have a python dictionary of the form

data = {
    'category1': {
        'titles': ['t1', 't2', 't3'],
        'dates': ['d1', 'd2', 'd3']
    },
    'category2': {
        'titles': ['t4', 't5', 't6'],
        'dates': ['d4', 'd5', 'd6']
    }
}

and I want to create an html table which looks like:

category1        category2
t1               t4
d1               d4
--------------------------
t2               t5
d2               d5
--------------------------
t3               t6
d3               d6
--------------------------

I am using flask, my flask/python code is:

from flask import Flask, render_template
import pickle

app = Flask(__name__)

@app.route('/')
def hello_world():
    data=pickle.load(open('results.p','rb'))

    return render_template('index.html', x=data)

if __name__ == "__main__":
    app.run()

and my HTML template is:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Webpage</title>

</head>

<body>

<table>
{% for r,s in x.iteritems() %}
    <tr>
      <td>{{ r['titles'] }}{{r['dates']}}</td>
      <td>{{ s['titles'] }} {{s['dates']}}</td>
    </tr>
{% endfor %}
</table>
</body>
</html>

However I am getting an internal server error when I run this.

I have also tired data.iteritems() without any joy.

I also followed the accepted answer here: Python dictionary in to html table, but I get the same error.

poke · Accepted Answer · 2015-05-08T15:53:00.170

1

newdata = zip(
    zip(*(x['titles'] for x in data.values())),
    zip(*(x['dates'] for x in data.values())))

print(list(data.keys()))
for group in newdata:
    for row in group:
        print(row)
    print('-----')

Gives you this output:

['category1', 'category2']
('t1', 't4')
('d1', 'd4')
-----
('t2', 't5')
('d2', 'd5')
-----
('t3', 't6')
('d3', 'd6')
-----

As you can see, the items are now correctly paired in newdata. So now you can iterate over it better and produce your table output.

The template code could then look like this:

<table>
  {% for group in x %}
     {% for row in group %}
     <tr>
       <td>{{ row[0] }}</td>
       <td>{{ row[1] }}</td>
    </tr>
    {% endfor %}
  {% endfor %}
</table>

edited May 08 '15 at 15:53

answered May 08 '15 at 10:07

poke

369,085
72
557
602

thanks, so to get this to html via flask would I replace `print(row)` with ` `return render_template('index.html',x=row)` and `{{ r['titles'] }}{{r['dates']}}` in the html file with `{{x}}` ? – laila May 08 '15 at 10:12
No, you still need to pass the whole `newdata` object and change the loops in the template. I added an example to my answer. – poke May 08 '15 at 10:41
thanks, there seems to be something else off with my code-- as I am getting the same error. I'll need to keep digging. – laila May 08 '15 at 12:59
aha, there is a `for` missing in your inner loop! It totally works now, thanks – laila May 08 '15 at 15:41
Oh, you’re right! Fixed that, and glad it works now :) – poke May 08 '15 at 15:53

score 0 · Answer 2 · answered May 08 '15 at 10:16

Take a look, I hope that is useful :D

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Webpage</title>
</head>
<body>
    <table>
        {% for r in x.values() %}
            <tr>
              <td>{{ r['titles'] }}{{ r['dates'] }}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

Flask and HTML, from python dictionary to HTML table iteratively

2 Answers2