遍歷Jinja2模板中的詞典列表

Question

我正在嘗試通過字典列表循環，使用鍵的值作為Jinja模板內的HTML屬性。 但是模板不會呈現任何數據。 將數據傳遞到路由文件中的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>