如何在HTML上格式化JSON文件视图

时间:2018-12-19 12:03:03

标签: html json

html页面上的当前json视图

{"result": [{"id": "103300640", "sms_phone": "730276061", "corrected to": 
"27730276061"}, {"id": "103277733", "sms_phone": "716125197", "corrected 
 to": "27716125197"}]}

我希望将其格式化为

{  
   "result":[  
      {  
         "id":"103300640",
         "sms_phone":"730276061",
         "corrected to":"27730276061"
      },
      {  
         "id":"103277733",
         "sms_phone":"716125197",
         "corrected to":"27716125197"
      }]
}

JS代码:

@app.route('/<path:req_path>')
def dir_listing(req_path):
   abs_path = os.path.join(UPLOAD_FOLDER, req_path)
   # Check if path is a file and serve
   if os.path.isfile(abs_path):
      return send_file(abs_path, mimetype="application/json")    
return render_template('/index.html')

HTML代码:

<ul>
    {% for file in file_list %}
    <li><a href="{{ file }}" id="list">{{ file }}</a></li>
    {% endfor %}
</ul>

2 个答案:

答案 0 :(得分:1)

您可以尝试一下:

使用<pre>标签在HTML页面中和JSON.stringify()中显示代码本身。

var data = {"result": [{"id": "103300640", "sms_phone": "730276061", "corrected to": "27730276061"}, {"id": "103277733", "sms_phone": "716125197", "corrected  to": "27716125197"}]}


document.getElementById("beautified").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="beautified"></pre>

JSON.stringify()方法将JavaScript对象或值转换为JSON字符串,如果指定了重新放置函数,则可以选择替换值,如果指定了重新放置数组,则可以仅包括指定的属性。

答案 1 :(得分:0)

您可以使用JSON.stringify

请参见以下示例:https://codepen.io/adrianparr/pen/VeyeVP