json字符串格式化显示到页面 / json.stringify()的三个参数 / 保存json数据到文件显示在一行问题

最新推荐文章于 2023-04-21 21:41:28 发布

chiriwu

最新推荐文章于 2023-04-21 21:41:28 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： json javascript 前端

本文链接：https://blog.csdn.net/qq_43137001/article/details/121951345

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题描述：

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>