Перебор списка словарей в шаблоне Jinja2

Question

Я пытаюсь перебрать список словарей, используя значения ключей в качестве атрибутов HTML в шаблоне jinja. Но шаблон не отображает никаких данных. Я убедился, что данные верны, когда я передаю их в функцию render_template в файле маршрутов.

Я прошел через ряд вопросов StackOverflow, в частности Как перебрать список словарей в шаблоне jinja? , но безрезультатно.

Вот моя структура данных:

[
  {
    'name': 'chicken pie',
    'image': 'chicken.jpg',
    'url': 'chicken.html'
  },
  {
    'name': 'chicken sandwich',
    'image': 'sandwich.jpg',
    'url': 'sandwich.html'
  }
]

А мой шаблон:

<div class="page-header">
  <h1>Recipes Matching {{ query }}</h1>
  {% for dict_item in names %}
    <div>
      <img src="{{ dict_item['image'] }}" height="100" width="100">
      <a href="{{ dict_item['url'] }}">{{ dict_item['name'] }}</a>
    </div>
  {% endfor %}
</div>

Answer 1

Гораздо проще преобразовать вашу структуру в список объектов класса с ключами словаря в качестве атрибутов:

class Item:
  def __init__(self, vals):
    self.__dict__ = vals

@app.route('/yourroute')
def your_route():   
  data = [{'name': 'chicken pie', 'image': 'chicken.jpg', 'url': 'chicken.html'}, {'name': 'chicken sandwich', 'image': 'sandwich.jpg', 'url': 'sandwich.html'}]
  return flask.render_template('your_template.html', names = [Item(i) for i in data])

И наконец, в your_template.html:

<div class="page-header">
<h1>Recipes Matching {{ query }}</h1>
{% for dict_item in names %}
  <div>
    <img src="{{dict_item.image}}" height="100" width="100">
    <a href="{{dict_item.url}}">{{dict_item.name}}</a>
  </div>
{% endfor %}
</div>