前端如何优雅显示json字符串到页面上

前端如何优雅显示json字符串到页面上

面对一个后端接口返回的一个超长长的json字符串，产品要求优雅的显示到页面上，方便用的人看懂。如何做？

当然是立马解决！

1. 由于返回的内容任何格式的字符串，所以先转成JSON格式，再添加缩进格式转成字符串

JSON.stringify(JSON.parse(content),null,2)

知识点：JSON.parse()和JSON.stringify()

一般使用，直接传入字符串或者json对象就行，这两个函数后面都还有可选参数可以添加，对返回值进行处理

JSON.parse()

用法：

JSON.parse(text, function (key, value) {
	....数据处理
	return value;
});
// text文本后的函数可选

事例：

let text = '{"name":"xiaoming","age":"18"}';
let obj = JSON.parse(text, function (key, value) {
		if (key === "age") {
		return '年龄：' + value;
		} else {
		return value;
		}
});
console.log('obj: ', obj)

JSON.stringify()

用法：

function replacer(key, value) {
  ....数据处理
  return value;
}
JSON.parse(obj, replacer, space);
// obj对象后的函数可选与space参数可选
// replacer 可选，可以是一个函数或者一个数组
// space 可选 用来控制结果字符串里面的间距,如果为数字则范围1-10，也可以使用 \t 来缩进

事例：

let obj = {
        name:'xiaoMing',
        age:18,
        height:173,
        weight:70
    }
function replacer(key, value) {
  if (key === "age") {
		return '年龄：' + value;
		} else {
		return value;
		}
  return value;
}
let objString = JSON.stringify(obj, replacer, 2);
console.log('objString: ', objString)

如果 replacer 是一个数组，数组的值代表将被序列化成 JSON 字符串的属性名。

let obj = {
        name:'xiaoMing',
        age:18,
        height:173,
        weight:70
    }
let objString = JSON.stringify(obj, ['name', 'age'], 2); 只保留 “name” 和 “age” 属性值。
console.log('objString: ', objString)

这里介绍了一些比较核心的一些知识点，这两个函数还有一些小的要注意点，如果有需要可以点击下面链接在MDN网站查找

JSON.parse()

JSON.stringify()

2. 转换完成之后，直接丢标签里，你会发现还是很丑不可读，产品要求全部换行，上下滚动就能查看所有数据，加样式

<pre style={{whiteSpace: 'pre-wrap',fontSize:12,wordBreak:'break-word'}}>{JSON.stringify(JSON.parse(content),null,2)}
</pre>

知识点：white-space和word-break 样式属性

white-space 上图

添加whiteSpace: 'pre-wrap'你会发现还是可能会出现水平滚动条，这是因为有些单词很长超出，触发水平滚动，这里就需要word-break来控制单词的换行

word-break有 break-all、break-word、keep-all 三个类型的值

break-all：允许在单词内换行，只要到达最大宽带就换行。整块内容会换行的非常整齐

break-word：单词看会成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

keep-all ：只能在半角空格或连字符处换行。

结束