今天给大家介绍一下如何通过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. wife-wife【原型链污染】

    wife-wife[原型链污染][难度:4] 题目界面 登录界面 注册界面 思路:在注册界面,利用原型链污染漏洞,获得管理员权限. 步骤 在注册界面输入用户名-密码-邀请码,勾选admin选项,抓包 ...

  2. 初识BigDecimal

    BigDecimal所创建的是对象,我们不能使用传统的+.-.*./等算术运算符直接对其对象进行数学运算,而必须调用其相对应的方法. 方法中的参数也必须是BigDecimal的对象. BigDecim ...

  3. Redis配置模式及各自优缺点

    大家好,我是闲者,今天简单聊下redis部署模式.Redis支持多种不同的数据结构和模式,以满足不同的使用场景.以下是一些常见的Redis配置和模式示例以及详解.原文地址:Redis配置模式及各自优缺 ...

  4. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 05.认识GameMode&自动生成AI角色

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章将会讲述UE中Gamemode的基本概念,并在C++中开发GameMode,为游戏设置一个简单的玩法:使 ...

  5. Boost Your Strategy With The Content Marketing Tools

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

  6. 爬取Discuz!社区的教程标题

    爬取Discuz!社区的教程标题-史上最详细解析(实现分页) 摘要:本文记录了爬取Discuz!社区的教程标题的详细过程,过程清晰 这是O的第一篇博客,如有排版问题请大佬见谅,O非常希望大佬能在评论区 ...

  7. 【小白学YOLO】一文带你学YOLOv1 Testing

    摘要:本文将为初学者带详细分析如何进行YOLOv1 Testing的内容. YOLOv1 Testing 进入testing阶段,我们已经得到98个bounding box和confidence还有C ...

  8. SPL:跑批有这么难么?

    摘要:SPL实现了更优算法,性能远远超过存储过程,能显著提高单机计算效率,非常适合跑批计算. 本文分享自华为云社区<Java开源专业计算引擎:跑批真的这么难吗?>,作者: Java李杨勇. ...

  9. 鸿蒙轻内核M核源码分析:数据结构之任务排序链表

    摘要:鸿蒙轻内核的任务排序链表,用于任务延迟到期/超时唤醒等业务场景,是一个非常重要.非常基础的数据结构. 本文会继续给读者介绍鸿蒙轻内核源码中重要的数据结构:任务排序链表TaskSortLinkAt ...

  10. 云图说|玩转华为HiLens之端云协同AI开发

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 华为HiLens ...