json数据格式化展示出来
程序员文章站
2024-01-12 16:18:16
...
今天有一个前公司的同事，请教我一个问题。他问我，怎么将一个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数据，效果看下图：
上一篇： vs code 常用插件