Flask Jinja2 - 解析JSON

Question

我将尝试在Jinja2 HTML模板中显示一些JSON结果，但它要么返回一个空页面，要么将JSON的每个字符放在新行上，或者将每个字符与间隔一起返回。

我发送到Jinja2模板的对象看起来像这样：

[
  {
    "name": "John",
     "lastname": "Smith", 
     "age": 22, 
     "likes": [
       {"fruits": 
         ["bananas", "oranges"]
         }, 
       {"sweets": 
         ["chocolate"]
         }
       ]
     }
   ]

为了将JSON对象发送到Jinja2模板，我使用以下方式:

render_template("report.html", items=items)

在Jinja2模板HTML中，如果我使用{{ items }}，它会将整个对象作为文本显示。如果我尝试获取{{ items['name'] }}，页面上将不会显示任何内容，页面将完全为空。

我也尝试过：

{% for x in items %}
{{ x }}
{% endfor %}

这段代码只是展示了相同的“文本”，但是加入了空格：

[ { " n a m e " : "J o h n " [...]

在HTML文件中，我想要实现如下效果：

<div id="name">{{ items['name'] }}</div>

我如何在传递给Jinja2的JSON对象中显示其中的对象？

- user9745009

---

当你说 JSON 的时候... 你的意思是 Python 对象吗？Jinja2 将 Python 对象渲染到模板中。 - Shawn K

字典，是的... - user9745009

Answer 1

我想我已经到了结尾。

起初，我必须使用json_dumps将对象转换为JSON格式，然后再使用json.loads加载新的对象。

r = json.dumps(json_onject)
loaded_r = json.loads(r)
return render_template("report.html", items=loaded_r)

现在我可以使用JSON对象中的任何值。

- user9745009

---

经过几个小时的挫败，这对我起作用了。谢谢。我想知道为什么需要这样做，为什么其他地方没有解释？ - Zvi

Answer 2

我有一个稍作修改的例子，对我来说非常有效：

app.py：

link_chart_data = {
    "type":
    "LinkChart",
    "items": [{
        "type": "node",
        "id": "ac1",
        "u": "static/icons/bank.png",
        "t": "45081063"
    }]
}

@app.route('/link_chart')
def covid():
    return render_template("link_chart/index.html", flask_data=link_chart_data)

然后在templates/link_chart/index.html中：

<script>
    const parsedData = JSON.parse('{{ flask_data|tojson }}');
    const unparsedData = '{{ flask_data }}'
    console.log('parsed', parsedData)
    console.log('unparsed', unparsedData)
</script>

这将产生：

parsed, 
items: Array(1)
0:
id: "ac1"
t: "45081063"
type: "node"
u: "static/icons/bank.png"
__proto__: Object
length: 1
__proto__: Array(0)
type: "LinkChart"

我希望你能翻译这个内容：^^这是我想要的，一个新的JSON对象。

还有：

unparsed {'type': 'LinkChart', 'items': [{'type': 'node', 'id': 'ac1', 'u': 'static/icons/bank.png', 't': '45081063'}]}

^^这真的不是我想要的。

|tojson jinja模板将变量还原为与python（flask）相同的格式，以便传递。 JSON.parse() javascript函数将其从字符串转换为javascript中的JSON对象。

希望这可以帮到你。

- Sharpie

---

谢谢@Sharpie，它完美地工作了=) - Rodrigo E. Principe

Answer 3

嘿，你的json是一个数组而不是对象，所以你需要考虑到这一点，先访问你想要的对象，然后再访问属性。

<div id="name">{{ items[0]['name'] }}</div>  

或者

在这种情况下，x变成了对象，你可以像这样使用它：

{% for x in items %}
    <div id="name">{{ x['name'] }}</div>  
{% endfor %}

- Craicerjack

---

感谢您的回复。然而，如果我创建一个对象 items = dict() items['name'] = "John" return render_template("report.html", items=items) 并尝试打印 items['name']，它仍然返回一个空页面。 - user9745009

Answer 4

我尝试使用json.dumps在Python中解析JSON，但没有成功。 但是，我重命名了HTML文件。

从：index.html.jinja

到：index.html

在Python应用程序中重命名,

例如：return render_template('index.html.jinja', products=products)

它已经起作用了！

- carlos rocha