Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > JS Tutorial > body text

JSON format page display and beautification method based on javascript_javascript skills

WBOY

Release： 2016-05-16 16:42:41

Original

1291 people have browsed it

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

Copy after login

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 
}

Copy after login

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>

Copy after login

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

Related labels：

json format

source：php.cn

Previous article：ff Similarities and differences between global dynamic positioning under chrome and ie and how to obtain global height_javascript skills Next article：Encapsulation of adding and deleting native js events_javascript skills

Statement of this Website

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