Home > Article > Web Front-end > JSON format page display and beautification method based on javascript_javascript skills

JSON format page display and beautification method based on javascript_javascript skills

WBOYOriginal: 2016-05-16 16:42:411293browse

{"name": "monkey","age": "24","height": 164.0}

If you want the above json string to be displayed on the page more easily readable, change it to the following style:

{ 
"name": "monkey", 
"age": "24", 
"height": 164.0cm 
}

The method introduced in this article is based on javascript, and the code is as follows:

<html> 
<head>/ 
//style中是css代码 
<style type="text/css"> 
body 
{ 
white-space: pre; 
font-family: monospace; 
} 
</style>　　 
//script中是javascript代码 
<script> 
window.error_id_msgs = <%= error_id_msgs | raw %>; 
function myFunction() { 
document.body.innerHTML = ""; 
document.body.appendChild(document.createTextNode(JSON.stringify(window.error_id_msgs, null, 4))); 
}　　　　　 
</script> 
</head> 
<body onload="myFunction()">　//表示页面加载时调用myFunction() 
</body> 
</html>

Where window.error_id_msgs is the json object to be converted, the combination of css and myFunction can realize page display conversion

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ff Similarities and differences between global dynamic positioning under chrome and ie and how to obtain global height_javascript skillsNext article：ff Similarities and differences between global dynamic positioning under chrome and ie and how to obtain global height_javascript skills

See more

JSON format page display and beautification method based on javascript_javascript skills

Related articles