开发了一个json格式化工具,使用js格式化json的代码分享
今天给大家介绍一下如何通过js来格式化json。
假设json字符串是:
{"name":"刘德华","age":25.2,"birthday":"1990-01-01"}
我们使用的是Js的JSON方法
先把json字符串转为json对象,方法如下:
var jsonString = '{"name":"刘德华","age":35.2,"birthday":"1966-01-01"}' //普通json字符串
var jsonObj = JSON.parse(jsonString) //把json字符串转为json对象
这样我们就把json字符串转为json对象了
然后,我们再把json对象转为json字符串,这样,就可以实现json格式化了
JSON.stringify(jsonObj, null, 4)
转换结果如下
{
"name": "刘德华",
"age": 25.2,
"birthday": "1990-01-01"
}
上面JSON.stringify里面的4指的是代码缩进量,你也可以设置为2或者1等等
这样就单间的实现了json格式化功能
demo预览
写了一个小demo,可以试用。json格式化
json格式化原理
JSON 可以将程序语言对象中表示的一组数据转换为字符串,然后就可以在网络或者程序之间轻松地传递这个字符串,并在需要的时候将它还原为各编程语言所支持的数据格式,例如在 PHP 中,可以将 JSON还原为数组或者一个基本对象。在用到AJAX时,如果需要用到数组传值,这时就需要用JSON将数组转化为字符串。JSON在线解析功能的原理主要是将输入的 JSON 文本转换为内存中的数据结构,然后对其进行解析并转换为可操作的 JavaScript 对象。 在实现 JSON 解析功能时,可以选择使用递归下降解析器或状态机解析器。递归下降解析器使用递归函数来处理每种类型的 Token,而状态机解析器则将解析过程看作一系列状态转换。此外,还需要注意处理 JSON 文本中的特殊字符、数字溢出等细节问题,并确保安全性,避免恶意输入导致的安全漏洞。
开发了一个json格式化工具,使用js格式化json的代码分享的更多相关文章
- js格式化JSON数据
前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...
- 原生js格式化json和格式化xml的方法
在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...
- 原生js格式化json工具
json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...
- 原生js格式化json的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 格式化 json 字符串
1.JSON.stringify的三个参数 var json = {"@odata.context":"$metadata#AddTableOne_466281s&quo ...
- js格式化json字符串和json对象
1,格式化json对象 var json = {"@odata.context":"$metadata#AddTableOne_466281s","v ...
- (转)JSON数据格式和js操作json总结
原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com | vince ...
- arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式
arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...
- JavaScript中使用JSON,即JS操作JSON总结
JSON(JavaScript Object Notation 对象标记) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生 ...
- json树递归js查询json父子节点
上代码,直接另存为html打开,看console控制台就可以看到效果了 <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- Sql整理
1:数据库 数据库是以某种有组织的方式存储的数据集合. 保存有组织数据的容器,通常是一个文件或者一组文件. SQL 是Structured Query Language (结构化查询语言)的缩写. 2 ...
- elastic优化
通过定义keyword 的 "null_value" :"NULL",使得搜索是不用单独使用exists查询.统一用terms查询就能查询到想要的结果 利用co ...
- Android 事件分发介绍
目录 一.目的 二.环境 三.相关概念 3.1 事件分发 四.详细设计 4.1应用布局 4.1.1 应用布局结构 4.1.2 LayoutInspector 4.2 关键View&方法 4.2 ...
- 《代码整洁之道 Clean Code》学习笔记 Part 2 - 写出优雅的函数的10条建议
大师级程序员把系统当作故事来讲,而不是当作程序来写. TLDR 短小(不超过 20 行.缩进不超过 2 层) 只做一件事 保持在同一抽象层级 用多态替代 switch 取个好的函数名 函数参数越少越好 ...
- 3步带你搞定华为云编译构建CodeArts Build “新手村任务”
华为云编译构建(CodeArts Build)基于云端大规模并发加速,为客户提供高速.低成本.配置简单的混合语言构建能力,帮助客户缩短构建时间,提升构建效率. 本文将给各位开发者带来华为云CodeAr ...
- API生态的发展与机遇:从5000组数据看中国API生态与开发者现状
摘要:华为云联合多家单位发布了<中国API生态与开发者现状调研报告(2020年)>,旨在通过API生态.API开发者.使用者.API全生命周期管理等多视角展现我国API发展的现状与机遇,力 ...
- IAP:物联网终端软件升级技术
摘要:IAP是利用自己的程序代码实现升级程序(新的APP)从外部接口(可以是串口.I2C.SPI.网口等等)写入到flash中,再通过flash读写操作,将新的APP覆盖原有APP程序,在重新从新的A ...
- 浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战
作为前端老鸟,从IE的6.7.8开始做前端,各种兼容性折磨死人.js还好有了jQuery.chrome出来后,真是救苦救难,解救程序员的于水火.但是可恶的boss还是要求兼容ie6,7.感谢淘宝团队的 ...
- socket.d.js v2.3.4 支持"微信"、"uniapp"
Socket.D 是基于"事件"和"语义消息""流"的网络应用层协议.有用户说,"Socket.D 之于 Socket,尤如 Vu ...
- Solon 的常用配置
一.服务端基本属性 #服务端口(默认为8080) server.port: 8080 #服务的 http 信号端口(默认为 ${server.port}) server.http.port: 8080 ...