问题描述：
- json格式数据转换为字符串后console.log输出，在一行显示
- json格式数据转换为字符串保存到文件后，文件内容只显示在一行
- 将json格式数据显示在页面上，格式有问题
对于问题1和2，在json.stringify()中引入后两个参数，来规范转换格式。
JSON.stringify三个参数含义
const data = [
{
name: '张三',
age: 18,
sex: '男',
where: {
province: '湖南',
city: '长沙',
county: '岳麓区'
}
},
{
name: '李四',
age: 22,
sex: '男'
},
{
name: '王五',
age: 18,
sex: '男'
}
]
console.log(JSON.stringify(data))
console.log(JSON.stringify(data,'',2)) //第二个参数可为''或null或undefined ，第三个参数为数字的话代表空格个数
console.log(JSON.stringify(data,'','\t'))
保存json数据到文件也直接这么处理就行
fs.writeFile('file.txt', JSON.stringify(data, null, 2), function(err){
if(err){
console.log('err=', err)
}else{
console.log('success')
}
})
对于问题3.
由于页面不识别空格和\t，可以使用pre标签将字符串包含起来保留原格式
如果使用vuejs的话，还可以使用json-viewer插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json美化</title>
</head>
<body>
<h1>
<pre id="code"></pre>
</h1>
</body>
<script>
const data = [
{
name: '张三',
age: 18,
sex: '男',
where: {
province: '湖南',
city: '长沙',
county: '岳麓区'
}
},
{
name: '李四',
age: 22,
sex: '男'
},
{
name: '王五',
age: 18,
sex: '男'
}
]
document.getElementById('code').innerText = JSON.stringify(data,null,2);
</script>
</html>