How to format json file view on html

Question

current json view on html page

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

what I want it to be formatted display like

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

JS code:

@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 code:

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

I believe this is already answered by other similar questions. You might wanna take a look at this [one](https://stackoverflow.com/questions/16862627/json-stringify-output-to-div-in-pretty-print-way). — Lord Salforis, Dec 19 '18 at 12:09
It does not help me. I'm having the json file listed on html page and on user click it should open the beautified json format. — rufus, Dec 19 '18 at 12:36

Sinto · Answer 1 · 2018-12-19T12:17:14.737

4

You can try this out:

Use <pre> tag for showing code itself in HTML page and with 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>

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a re-placer function is specified or optionally including only the specified properties if a re-placer array is specified.

edited Dec 19 '18 at 12:17

answered Dec 19 '18 at 12:10

Sinto

3,915
11
36
70

the json is in the file and code is
- {{ file }}
– rufus Dec 19 '18 at 12:39
I meant how to use the 'pre' tag for a json file similar like teh code example given above. – rufus Dec 19 '18 at 13:09
you can use it in HTML not in JSON file. – Sinto Dec 19 '18 at 13:31
yes in html file (as per the example) only I am asking. In this question description above, I mentioned HTML code. Could you please modify that and paste it here? – rufus Dec 19 '18 at 13:47
Nice, simple answer. – EJK Dec 04 '21 at 08:56

Stack Overflow · Answer 2 · 2018-12-19T12:14:36.083

0

You can use JSON.stringify

See example at: https://codepen.io/adrianparr/pen/VeyeVP

edited Dec 19 '18 at 12:14

answered Dec 19 '18 at 12:06

Stack Overflow

2,416
6
23
45

Mine is the json file. How do I use that
```
 tag in this code  - 
```
- {{ file }}
– rufus Dec 19 '18 at 12:27
Please provide your code in stackBlitz in order to enable edit – Stack Overflow Dec 19 '18 at 12:36

score 0 · Answer 3 · answered Feb 08 '22 at 07:00

You have to use JS to achieve this. Please have a look at the below code. Use the <pre> tag to achieve this.

<html>
<head>
</head>
<body onload="myFunction()">
<script>
function myFunction() {
var data = {
    "data": {
        "x": "1",
        "y": "1",
        "url": "http://test.com"
    },
    "event": "start",
    "show": 1,
    "id": 50
}


document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
}

</script>
<pre id="json"></pre>
</body>
<html>

How to format json file view on html

3 Answers3