如何使用Flask/Jinja2将Python dict转换成HTML模板

2024-03-28 23:44:21 发布

您现在位置:Python中文网/ 问答频道 /正文

我试图在HTML文件中使用Python dict。字典通过Flask中的render_template函数传递给HTML模板。

这是dict的格式:

dict1[counter] =  {
    'title': l.getTitle(),
    'url': l.getLink(),
    'img': l.getImg()
}

然后在HTML模板中,我想在其中迭代这个dict:

{% for l in result.iteritems() %}
<div class="link">
            <a href="{{ l.url }}"> {{l.title}}</a>
            <img src="{{ l.img }}" width="100" height="100">
</div>
{% endfor %}

我不知道是什么问题,因为烧瓶里没有错误的日志。


Tags: 文件函数div模板urlflaskimg字典
1条回答
网友
1楼 · 发布于 2024-03-28 23:44:21

问题是您在iteritems()上迭代,这是(键,值)对的迭代器。这意味着l变量是元组,而不是字典。实际上,您需要遍历itervalues()。更新模板代码如下:

{% for l in result.itervalues() %}
<div class="link">
    <a href="{{ l.url }}"> {{l.title}}</a>
    <img src="{{ l.img }}" width="100" height="100">
</div>
{% endfor %}

我相信这会让你有你想要的行为。


注意,这将以随机顺序返回值(因为遍历字典是随机的)。如果要按键排序,可以按如下方式修改模板:

{% for key in result.iterkeys()|sort %}
<div class="link">
    {%- set val=result[key] %}
    <a href="{{ val.url }}"> {{val.title}}</a>
    <img src="{{ val.img }}" width="100" height="100">
</div>
{% endfor %}

在这里,我们遍历排序的键,获取相关的值,然后将其放入模板中。

您还可以将sort过滤器换成另一个应用您选择的顺序的过滤器。


下面是一个演示新模板的最小示例:

TEMPLATE_STR = """
{% for l in result.itervalues() %}
<div class="link">
    <a href="{{ l.url }}"> {{l.title}}</a>
    <img src="{{ l.img }}" width="100" height="100">
</div>
{% endfor %}
"""

from jinja2 import Template

template = Template(TEMPLATE_STR)

class democlass(object):
    def getTitle(self): return "Hello world"
    def getLink(self): return "google.co.uk"
    def getImg(self): return "myimage.png"

class democlass2(object):
    def getTitle(self): return "Foo bar"
    def getLink(self): return "stackoverflow.com"
    def getImg(self): return "a_photo.jpeg"

l = democlass()
m = democlass2()

dict1 = {}
dict1['l'] =  { 'title': l.getTitle(), 'url': l.getLink(), 'img': l.getImg() }
dict1['m'] =  { 'title': m.getTitle(), 'url': m.getLink(), 'img': m.getImg() }

print template.render(result=dict1)

这是它返回的HTML:

<div class="link">
    <a href="stackoverflow.com"> Foo bar</a>
    <img src="a_photo.jpeg" width="100" height="100">
</div>

<div class="link">
    <a href="google.co.uk"> Hello world</a>
    <img src="myimage.png" width="100" height="100">
</div>

相关问题 更多 >