原生js格式化显示json对象以及stringify的妙用

这篇文章的由来是这样的：前两天遇到这样一个场景，接口返回了一个json对象，要求我进行格式化显示（显示出json对象的结构）。那么我就想了，一个对象要想显示出来，得转成string 类型的，于是我就使用了JSON.stringify(),但是转成字符串之后并没有缩进，显示出来的是一个长长的字符串。难道我还要自己人为的遍历对象,自己拼接一个带缩进的字符串么？太TM扯了！于是查看了stringify的官方文档，发现了很多有意思的东西，这个函数的作用远远不止是将json对象转成string那么简单，下面是我列举的stringify的几个小功能:

json格式化，带缩进
过滤掉无效的字段
对符合某种条件的字段做操作

原始数据

person = {sex: 'man',name: 'Tom',telphones: ["234123423","2345234523"]
}

一、原始情况，直接显示json字符串

code:

JSON.stringify(person)

运行结果：

{"sex":"man","name":"Tom","age":22,"telphones":["2341234123","3452345"]}

二、将一个json对象格式化显示出来（显示的时候配合pre标签）

code:

JSON.stringify(person, null, 2)

运行结果：

{sex: 'man',name: 'Tom',telphones: ["234123423","2345234523"]
}

三、不显示某些字段（哪些字段不需要显示就返回undefined）

code

JSON.stringify(person, function(k, v){if (k === 'telphones'){return undefined}return v
}, 2)

运行结果：

{sex: 'man',name: 'Tom'
}

四、只显示某些字段

code

JSON.stringify(person, ['sex'], 2)

运行结果：

{sex: 'man'
}

更多详情
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

原生js格式化显示json对象以及stringify的妙用相关推荐

js mysql json字符串转数组中_php数据库数据转换为js中的json对象
/ 1.在company数据user表中取出10条数据,保存为数组 2.在将数组转化为json格式,传递给js 3.用json解析器将传递过来的json字符串转化为json对象, 4.用documen ...
JS字符转为json对象
jsonString＝{"name":"zzl"}; var obj=eval('('+jsonString+')'); alert(obj.name); 本文 ...
浏览器网页自动转格式化显示json数据
我的浏览器是360的,之前google浏览器也用过格式化显示json的扩展插件,忘了叫什么,自己去扩展中心找找浏览器扩展中心, 搜索 json 找到 iFormatTool ,点击安装即可刷新下要 ...
Linux格式化显示json工具jq
Linux格式化显示json工具jq 安装格式化显示json 读取json文件获取所有的key 获取制定key的value值本地安装jq失败解决办法,离线下载`jq`依赖包`oniguruma ...
js字符串转换为json对象JSON.parse()及将json对象转为json字符串JSON.stringify()
一.JSON对象中有两个非常好用的方法: 1 JSON.stringify接收一个JS对象转化为json字符串 2 JSON.parse接受json字符串转化为JS对象 const my={ name ...
js中的json对象和字符串之间的转化
字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = ...
js中转换json对象方法详解及使用案例
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
js字符串与json对象处理
直接上代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8"><titl ...
js中读取json对象
json的用途我也不在这里介绍了,简单说一些JSON的结构: JSON有两种结构 json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以 ...
Js 怎么遍历json对象所有key及根据动态key获取值
对于json对像,怎么遍历json对象的所有key,在使用json对象时,如果无法知道key,怎么通过key变量来获取值?请参阅下面的关键代码: <html> <head>&l ...

原生js格式化显示json对象以及stringify的妙用

原生js格式化显示json对象以及stringify的妙用相关推荐

最新文章

热门文章