如何使用 Flask/Jinja2 將 Python 字典放入 HTML 模板

Question

我正在嘗試在 HTML 文件中使用 Python 字典。 字典通過 Flask 中的render_template函數傳遞給 HTML 模板。

這是字典的格式：

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

然后在我想要遍歷這個字典的 HTML 模板中：

{% 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 %}

我不知道問題是什么，因為 Flask 中沒有錯誤日志。

Answer 1

問題是您要遍歷iteritems() ，它是（key，value）對的迭代器。 這意味着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過濾器換成另一個應用您選擇的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>

Answer 2

# Python Code

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():


    k = {
            "Movie" : "KGF Chapter 1",
            "Director" : "Prashant Neel",
            "Antagonist" : "Adheera"
        }

    return render_template("index.html",k = k)

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

<!-- Below is the HTML Code : --> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>

    <h1> Your dictionary is here : {{k}} </h1>
    

</body>

</html>

如何使用 Flask/Jinja2 將 Python 字典放入 HTML 模板

問題描述

2 個解決方案

解決方案1
3 已采納 2015-04-09 19:45:19

解決方案2
0 2022-01-24 12:30:22

如何使用 Flask/Jinja2 將 Python 字典放入 HTML 模板

問題描述

2 個解決方案

解決方案1 3 已采納 2015-04-09 19:45:19

解決方案2 0 2022-01-24 12:30:22

解決方案1
3 已采納 2015-04-09 19:45:19

解決方案2
0 2022-01-24 12:30:22