今天给大家介绍一下如何通过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的代码分享的更多相关文章

  1. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  2. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  3. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js 格式化 json 字符串

    1.JSON.stringify的三个参数 var json = {"@odata.context":"$metadata#AddTableOne_466281s&quo ...

  6. js格式化json字符串和json对象

    1,格式化json对象 var json = {"@odata.context":"$metadata#AddTableOne_466281s","v ...

  7. (转)JSON数据格式和js操作json总结

    原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com |         vince ...

  8. arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式

    arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...

  9. JavaScript中使用JSON,即JS操作JSON总结

    JSON(JavaScript Object Notation 对象标记) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生 ...

  10. json树递归js查询json父子节点

    上代码,直接另存为html打开,看console控制台就可以看到效果了 <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. AI量化策略会:可以直接上实盘的策略构建方法

    一年一度的培训虽晚但到,这是BigQuant与大家走过的第五个培训年头,在过去的四年里看到很多学员的成长和蜕变,从一开始的懵懂无知,到现在对深度学习的信手拈来,BigQuant与各位学员们一样都收获颇 ...

  2. bash shell笔记整理——ls命令

    语法: ls [选项] [文件 或 目录] 选项 使用说明 –a 显示指定目录下的所有文件,包括隐藏文件. -A 显示除了.和..的外的所有文件. -l 显示详细的文件信息. -d 如果是目录,只显示 ...

  3. 数字孪生为何通过融合GIS系统能够更好地助力智慧城市发展?

    随着城市化进程的不断加速,智慧城市建设已成为许多城市发展的重要方向.在智慧城市中,数字孪生技术和GIS系统的融合,为城市发展带来了全新的可能性和机遇.数字孪生是一种将物理世界和数字世界相结合的技术,通 ...

  4. .Net中的AutoScrollPosition问题 (panel 滚动条的位置设定)

    本文转自:http://www.cnblogs.com/h2appy/archive/2008/04/23/1167400.html 有Panel类型的窗体panel1,其AutoScroll设为了T ...

  5. 非工程师指南: 训练 LLaMA 2 聊天机器人

    引言 本教程将向你展示在不编写一行代码的情况下,如何构建自己的开源 ChatGPT,这样人人都能构建自己的聊天模型.我们将以 LLaMA 2 基础模型为例,在开源指令数据集上针对聊天场景对其进行微调, ...

  6. Kubernetes常见错误总结

    1.屏幕持续打印Pod日志报error: unexpected EOF错误 Kubernetes: requesting flag for "kubectl logs" to av ...

  7. Boost Your Strategy With The Content Marketing Tools

    Boost Your Strategy With The Content Marketing Tools In today's digital landscape, content marketing ...

  8. 华为云GaussDB打造最可信的数据库,给世界一个更优选择

    近日,第14届中国数据库技术大会(DTCC2023)在北京国际会议中心顺利举行.大会以"数智赋能 共筑未来"为主题,邀请了上百位行业专家,一起探讨新时代下各类型数据库的最新动态和应 ...

  9. Spring Cache设计之美,你品,你细品…

    摘要:Spring Cache的功能很强大,设计也非常优雅,特别适合缓存控制没有那么细致的场景,比如门户首页,偏静态展示页面,榜单等等 本文分享自华为云社区<品味 spring cache设计之 ...

  10. 云原生时代,政企混合云场景IT监控和诊断的难点和应对之道

    摘要:正是因为政企IT架构云化的云原生架构,相比之前的单体烟囱式架构,在监控诊断方面有着更多的难点和挑战,这也在业界催生出大量相关的标准和工具. 本文分享自华为云社区<[华为云Stack][大架 ...