如何使用 Jinja2 单独访问字典列表中的每个字典?

How to access each dictionary individually in a list of dictionaries using Jinja2?

我在 Flask 中有一个 Python 列表,其中包含多个词典,如下所示(我还使用列表理解来访问词典):

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

@app.route('/')
def news_page():
    news = [{ "News" : "ABC", "Link" : "http://exampleabc.com", "Date": "01/03/20" },
           { "News" : "DEF", "Link" : "http://exampledef.com", "Date": "02/03/20" },
           { "News" : "GHI", "Link" : "http://exampleghi.com", "Date": "03/03/20" }]
    return render_template('news_screen.html', news = [Item(i) for i in news])

if __name__ == '__main__':
    app.run(debug = True)

我的 HTML 模板如下所示:

<table>
     {% for dict_item in news %}
          <div>
            <tr> {{ dict_item.News }}  </tr> <br>
            <tr> {{ dict_item.Link }}  </tr> <br>
            <tr> {{ dict_item.Date }}  </tr> 
          </div> 
     {% endfor %}
</table>

不幸的是,returns 所有三个词典(ABC、DEF、GHI),尽管我一次只想要一个,这样我就可以在不同的幻灯片上分别显示它们。

当前输出:

ABC
http://exampleabc.com
01/03/20

DEF
http://exampledef.com
02/03/20

GHI
http://exampleghi.com
03/03/20

如何分别访问每个词典,以便一次只显示 "ABC" 新闻、Link 和日期?

预期输出:

ABC
http://exampleabc.com
01/03/20

您不需要编写额外的代码来访问每个项目。只需将与字典相同的内容传递给 Jinja Tempalte。在这里你可以修改一些小的变化。

@app.route('/')
def news_page():
    news = [{ "News" : "ABC", "Link" : "http://exampleabc.com", "Date": "01/03/20" },
           { "News" : "DEF", "Link" : "http://exampledef.com", "Date": "02/03/20" },
           { "News" : "GHI", "Link" : "http://exampleghi.com", "Date": "03/03/20" }]
    return render_template('news_screen.html', news = news )

毕竟如果你想在 Jinja 模板中获得物品。

<table>
     {% for dict_item in news %}
          <div>
            <tr> <a href="{{ dict_item.Link }}">{{ dict_item.News }}</a></tr> <br>
            <tr> {{ dict_item.Link }}  </tr> <br>
            <tr> {{ dict_item.Date }}  </tr> 
          </div> 
     {% endfor %}
</table>

否则,如果你想在 Jinja 模板中使用单个项目。

<div class="panel">
      <div class="panel-title"><a href="{{ news[0].Link }}">{{ news[0].News }}</a></div>
      <div class="panel-body">{{news[0].Date}} </div>
</div>