json数据格式化展示出来

今天有一个前公司的同事,请教我一个问题。他问我,怎么将一个JSON格式的数据,格式化以后展示出来。我想了想,于是乎写出了这个东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON格式化后展示</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    
</body>
<script>

//执行一个组件
window.onload = function(){
    var data = {
        "extendId": "string",
        "objectCode": "string",
        "objectType": 0,
		"mayouchen":{
		   "name":"youchen",
		   "age":25,
		   "sex":"man"
		}
    };
    var jsonData = JSON.stringify(data, null, 4);
    alert(jsonData);
	console.log(jsonData);
}
</script>

</html>

上面这个代码直接运行就可以看到效果,这里最重要的就是 var jsonData = JSON.stringify(data, null, 4);这里的data就是你传入的JSON数据,效果看下图:

json数据格式化展示出来_第1张图片

你可能感兴趣的:(前端开发,小技巧)