Jinja2 - How to loop a json list?

Question

How can I loop a json list with jinja2?

I have this json list,

[
    {
        "first_name": "John",
        "last_name": "Smith",
        "user_id": 4,
        "address": null
    },
    {
        "first_name": "Jane",
        "last_name": "Heart",
        "user_id": 5,
        "address": null
    },
    {
        "first_name": "Dom",
        "last_name": "Robinsons",
        "user_id": 6,
        "address": null
    },
    {
        "first_name": "Pete",
        "last_name": "Hand",
        "user_id": 7,
        "address": null
    }
]

page.html,

<table>
   {% for user in users %}
   <tr><td>{{ user.first_name }}</td></tr>
   {% endfor %}
</table>

Result,

<table>

   <tr><td></td></tr>

   <tr><td></td></tr>

   <tr><td></td></tr>

   <tr><td></td></tr>
   ...

Any ideas?

Answer 1

your json list contains dictionaries; you need to access the dictionary elements differently than you would class members; try:

<tr><td>{{ user['first_name'] }}</td></tr>

this works for me (python 3.4 and python 2.7)

import json
from jinja2 import Template

json_str = '''[{"first_name": "John", "last_name": "Smith", "user_id": 4, 
    "address": null}, {"first_name": "Jane", "last_name": "Heart",
    "user_id": 5, "address": null}, {"first_name": "Dom",
    "last_name": "Robinsons", "user_id": 6, "address": null},
    {"first_name": "Pete", "last_name": "Hand", "user_id": 7,
    "address": null}]'''

users = json.loads(json_str)

tmpl = Template('''
<table>
   {% for user in users %}
   <tr><td>{{ user['first_name'] }}</td></tr>
   {% endfor %}
</table>
''')

print(tmpl.render(users = users))

output:

<table>

   <tr><td>John</td></tr>

   <tr><td>Jane</td></tr>

   <tr><td>Dom</td></tr>

   <tr><td>Pete</td></tr>

</table>

Answer 2

simple json iteration in jinja2

<table>
   <tr>
       {% for key in users[0] %}
       <th>{{ key }}</th>
       {% endfor %}
   </tr>

   {% for user in users %}
   <tr>
       {% for key in user %}
       <td>{{ user[key] }}</td>
       {% endfor %}
   </tr>
   {% endfor %}
</table>