在 Flask HTML 中显示 JSON 文件数据答案

【问题标题】：Display JSON file data in Flask HTML在 Flask HTML 中显示 JSON 文件数据
【发布时间】：2021-07-13 02:39:39
【问题描述】：

我正在开发一个 python 烧瓶应用程序，并希望将 JSON 文件中的数据显示到 html 网页上。但是当我这样做时，我失去了 JSON 结构，结果不是我预期的那样。我希望网页以可扩展的结构显示数据。我可以得到一些帮助吗？

JSON 数据

[
   [
      {
         "Name": "Harold",
         "ID": "CX1024",
         "Job": "Sales",
         "Address": {
            "Street": "37  Philadelphia Avenue",
            "Postal Code": "84010",
            "City": "Bountiful"
         },
         "Emergency Contact": {
            "Person": "Mark",
            "Relation": "Brother",
            "Phone": "801-296-4536"
         }
      },
      {
         "Name": "James",
         "ID": "CX1120",
         "Job": "Sales",
         "Address": {
            "Street": "671  Lonely Oak Drive",
            "Postal Code": "04617",
            "City": "BROOKSVILLE"
         },
         "Emergency Contact": {
            "Person": "Stephen",
            "Relation": "Father",
            "Phone": "251-454-0515"
         }
      }
   ],
   [
      {
         "Name": "Sarah",
         "ID": "RJ1020",
         "Job": "Management",
         "Address": {
            "Street": "4991  Stoney Lane",
            "Postal Code": "75081",
            "City": "Richardson"
         },
         "Emergency Contact": {
            "Person": "Curtis",
            "Relation": "Husband",
            "Phone": "972-995-0475"
         }
      },
      {
         "Name": "Clarkson",
         "ID": "RJ1117",
         "Job": "Management",
         "Address": {
            "Street": "4663  Kovar Road",
            "Postal Code": "02192",
            "City": "Needham"
         },
         "Emergency Contact": {
            "Person": "Angie",
            "Relation": "Sister",
            "Phone": "508-578-0498"
         }
      }
   ]
]

【问题讨论】：

标签： python html json flask

【解决方案1】：

我推荐两件事。

首先，您需要“字符串化”您的 JSON 对象（以获得上面的漂亮格式）。来自this 的回答，方法是使用JavaScript：

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

（注意JSON.stringify(...) 在某些版本的 IE 中不可用。理论上，您也可以使用 Python 执行此操作并发送“原始”字符串...但是发送 JSON 会使 lot 更有意义; 让前端处理格式化。）

接下来，您需要正确的 HTML 标记来呈现字符串。您需要<pre> 来保留空格（“pre”表示“预格式化”），您可能还需要<code>。

<html>
 <body>
  <pre>
   <code>
   { 
       foo: "sample", 
       bar: "sample" 
   }
   </code>
  </pre>
 </body>
</html>

【讨论】：

JSON 是一个本地文件，它可以工作吗？
当然，您只需读取 JSON 文件并将数据发送到您的 FE。如果它只是一个本地文件，你也可以直接将它包含在前端。