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 对象中的对象？

Answer 1

我想我已经结束了。

我必须首先

json_dumps

该对象，然后

json.loads

新对象。

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

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

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 模板取消了变量的 ascii 格式，以便它以来自 python（flask）的相同格式传递。

JSON.parse()

javascript 函数将其从字符串转换为 javascript 中的 JSON 对象。

我希望这有帮助。

Answer 3

嘿，所以你拥有的 json 是一个数组而不是一个对象，所以你必须考虑到这一点并首先访问你想要的对象，然后访问属性。

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

或

在这种情况下，

x

成为对象，您可以像这样使用它：

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

Answer 4

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

作者：

index.html

来自：

index.html.jinja

并在 Python 应用程序中重命名，

示例：

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

成功了！

Answer 5

在 JS 端，以下应该可以工作。

    var json_data = {{ active_announcement | tojson | safe }};
    if (Object.keys(json_data).length != 0) {
        console.log(json_data);
        // pass json_data to your function
    }