Example of JSON output in HTML format (test interface)
|
To display the JSON data in a beautiful indented format, you can use the simplest JSON.stringify function, because this function has two uncommon parameters at the end. See the description on MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify. The sample code is as follows:
<html>
<head>
<meta charset="utf-8" />
<title>hello</title>
<style>
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script type="text/javascript">
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</head>
<body>
<pre id="result">
</pre>
<script type="text/javascript">
var songResJson = {
"service": "ALL",
"qt": 581,
"content": {
"answer": {
"song": "If fate only lasts until we meet",
"album": "If fate only lasts until we meet",
"artist": "Wu Qilong Yan Yidan",
"pic_url": "upload/2022/web/5921969627395387.jpg"
},
"scene": "music"
}
}
document.getElementById('result').innerHTML = syntaxHighlight(songResJson);
// $('#result').html(syntaxHighlight(songResJson));
</script>
</body>
</html>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: About Zabbix custom monitoring items and triggers
>>: Sample code for implementing neon button animation effects with CSS3.0
Recommend
How to solve the problem of command failure caused by overwriting the original PATH and prompting command not found
A colleague asked me to help him figure out why m...
Add a copy code button code to the website code block pre tag
Referring to other more professional blog systems...
Implementation of positioning CSS child elements relative to parent elements
Solution Add position:relative to the parent elem...
15 lines of CSS code can cause Apple devices to crash, and the latest iOS 12 is not immune
Just 15 lines of CSS to crash your iPhone Securit...
How to use regular expression query in MySql
Regular expressions are often used to search and ...
A brief discussion of four commonly used storage engines in MySQL
Introduction to four commonly used MySQL engines ...
What does the "a" in rgba mean? CSS RGBA Color Guide
RGBA is a CSS color that can set color value and ...
Thoroughly understand JavaScript prototype and prototype chain
Table of contents Preface Laying the foundation p...
Summary of some tips for bypassing nodejs code execution
Table of contents 1. child_process 2. Command exe...
Implementation of Docker CPU Limit
1. --cpu=<value> 1) Specify how much availa...
Vue implements real-time refresh of the time display in the upper right corner
This article example shares the specific code of ...
Solve the problem of running hello-world after docker installation
Installed Docker V1.13.1 on centos7.3 using yum B...
Solution to the automatic termination of docker run container
Today I encountered a problem when I used Dockerf...
Mysql string interception and obtaining data in the specified string
Preface: I encountered a requirement to extract s...
Summary of MYSQL full backup, master-slave replication, cascading replication, and semi-synchronization
mysql full backup 1. Enable binary log and separa...