今天给大家介绍一下如何通过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. 开源不挣钱?这个项目上线半年月入超 30w

    很兴奋的告诉大家,Sealos 自从 6 月份上线以来,仅半年时间注册用户已经突破 7万,月收入超过 30w,本文来向大家介绍我们是怎么做开源商业化的.每月平均增速超过 40%,而且这些收入大部分来自 ...

  2. Scrapy-redis组件,实现分布式爬虫

    安装包 pip install -U scrapy-redis settings.py ##### Scrapy-Redis ##### ### Scrapy指定Redis 配置 ### # 其他默认 ...

  3. NLP复习之朴素贝叶斯

    朴素贝叶斯分类器和加一平滑计算每个单词的似然值 贝叶斯规则:c表示类别,d表示数据 \[P(c|d) = \frac{P(d|c)P(c)}{P(d)} \] 例题1 假设句子"I alwa ...

  4. 面向对象(OOP)

    面向对象 面向对象 面向过程 & 面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二步做什么... 面对过程适合处理一些较为简单问题 面向对象思想 物以类聚,分类的思维模式,思考问题首先 ...

  5. 太赞了!墙裂推荐这款网页版 Nginx 配置生成器,好用到爆!

    之前民工哥也给大家介绍过一款Nginx配置生成器:强大!Nginx 配置在线一键生成"神器",不太了解的人可以去看一看. 最近民工哥又发现一款好用的网页版开源工具,同样它的功能也是 ...

  6. QRCoder1.4.3生成二维码,不依赖System.Drawing,解决"未能找到类型或命名空间名QRCode","及ImageFormatPng仅在windows上受支持"

    生成二维码1(简单) 包引用: <PackageReference Include="QRCoder" Version="1.4.3" /> usi ...

  7. K8S系列一:概念入门

    K8S系列一:概念入门 写在前面 本文组织方式: K8S的架构.作用和目的.需要首先对K8S整体有所了解. K8S是什么? 为什么是K8S? K8S怎么做? K8S的重要概念,即K8S的API对象.要 ...

  8. 开发篇1:使用原生api和Langchain调用大模型

    对大模型的调用通常有以下几种方式:方式一.大模型厂商都会定义http风格的请求接口,在代码中可以直接发起http请求调用:方式二.在开发环境中使用大模型厂商提供的api:方式三.使用开发框架Langc ...

  9. Luogu1419 区间问题 二分 单调优化

    原题链接 题意 给定一段长度为1e5的序列A,并且给我们一个范围 \([S, T]\), 要求我们求出一段长度在这个范围内的连续子序列,并且要使这个连续子序列的平均值最大,输出这个平均值. 思路 一开 ...

  10. 知识+AI融合创新探索,华为云论文被AI顶级学术期刊IEEE TPAMI接受

    摘要:通过利用物体类别之间存在的层级关系约束,自动学习从数据中抽取识别不同类别的规则,一方面对模型的预测过程进行解释,另一方面也提供了一条引入人工先验知识的可行途径. 前言 受益于深度学习技术的突破, ...