经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
javaScript系列 [09]-javaScript和JSON (拓展)
来源：cnblogs　　作者：文顶顶　　时间：2022/1/1 19:26:14　　对本文有异议
本文输出JSON搜索和JSON转换相关的内容，是对前两篇文章的补充。

JSON搜索

在特定的开发场景中，如果服务器端返回的JSON数据异常复杂(可能超过上万行)，那么必然就有对JSON文档进行搜索的需求。在对JSON文档进行搜索的时候，建议使用专业的JSON搜索类库和工具来实现，这可以极大的简化JSON文档搜索的工作并降低工作难度。

JSON搜索的具体适用场景：对于某次API调用，我们只需要其中的部分数据，这种情况我们就可以根据某个标准来对返回的JSON内容进行搜索和过滤。

本文将会先后介绍多款处理JSON搜索的类库(工具)，包括但不限于JSONPath、JSON Pointer、jq等，在对各种方案进行介绍的时候将会从方案的优缺点、具体的使用方式等角度切入，开发中可以根据实际的开发场景和各工具自身的特点来进行选择。

工具001 → jq

jq    是一个提供了命令行界面的JSON搜索工具。
功能 可使用自身特定的查询语法来过滤JSON和截取数组，类似于JSON中的sed。
生态 除命令行外，拥有优秀的基于Web的jq测试器，甚至Node社区还以npm模块形式发布了教程。
优势

  • 提供丰富的搜索和过滤功能。
  • 大多数编程语言都对jq提供良好的支持。
  • jq相关文档质量较高，且拥有友好的交互式教程。
  • 拥有优秀的在线测试工具，能够对查询提供快速反馈。
  • 在命令行中能够很好的与cURL以及管道操作等协同工作。
  • 使用C语言编写的，没有运行时依赖，可运行在Linux，OS X和Windows等平台。

资料 官网 、Github仓库 、 Ubuntu-jq手册 、 Hyperpolyglot JSON工具、Jackson类库、Ruby-jq gem
语法

  1.   ======基本语法======
  2.   .     输出所有的文档内容。
  3.   |     管道符，传递数据流。
  4.   .key  输出指定key对应的部分文档。
  5.   .[ ]  输出数组中指定索引对应的元素。
  7.   ======查询语法示例========
  8.   .person[0]	获取JSON文档person数组中的第一个元素。
  9.   .person[-1]	获取JSON文档person数组中的最后一个元素。
  10.   .person[0:3]	获取JSON文档person数组中的前面三个元素。
  11.   .person[] | select (.age>20 ) 获取JSON文档中满足要求(age > 20)的所有数据。

安装

  • OSX系统 建议使用Homebrew来安装，具体命令为：$ brew install jq
  • windows系统 建议使用Chocolatey NuGet来安装，具体命令为： $ chocolatey install jq
  • 当然也可以通过git clone仓库源码来进行安装，具体细节以及其它系统处理请参考Download jq

这里给出OSX系统中通过命令行安装jq的具体细节和示例。

  1. wendingding$ brew install jq
  2. Updating Homebrew...
  3. ==> Installing dependencies for jq: oniguruma
  4. ==> Installing jq dependency: oniguruma
  5. ==> Downloading https://homebrew.bintray.com/bottles/oniguruma-6.8.2.high_sierra
  6. ######################################################################## 100.0%
  7. ==> Pouring oniguruma-6.8.2.high_sierra.bottle.tar.gz
  8. ??  /usr/local/Cellar/oniguruma/6.8.2: 17 files, 1.2MB
  9. ==> Installing jq
  10. ==> Downloading https://homebrew.bintray.com/bottles/jq-1.5_3.high_sierra.bottle
  11. ######################################################################## 100.0%
  12. ==> Pouring jq-1.5_3.high_sierra.bottle.tar.gz
  13. ??  /usr/local/Cellar/jq/1.5_3: 19 files, 946.6KB
  15. wendingding$ jq --version
  16. jq-1.5
在安装jq的时候，如果命令行报Error: Failure while executing: git config --local --replace-all homebrew.private true错误，可以尝试先执行`$ xcode-select --install `命令然后重新安装。在安装的时候如果总是卡在Updating Homebrew...可以`control + C`停止更新。

工具(jq-tutorial)

jq-tutorial是node社区以npm模块的形式发布的jq教程，是学习jq使用的一个比较好用的工具，这里简单列出该模块的安装和使用示例，并对命令进行简单的说明。

  1. wendingding$ npm search jq-tutorial
  2. NAME                      | DESCRIPTION          | AUTHOR          | DATE       
  3. jq-tutorial               | Exercises for…       | =rjz            | 2016-09-29 
  5. wendingding$ npm install -g jq-tutorial
  6. npm WARN notice [SECURITY] lodash has the following vulnerability: 1 low. 
  7. Go here for more details: https://nodesecurity.io/advisories?search=lodash version=2.4.2 
  8. -Run `npm i npm@latest -g` to upgrade npm version, and then `npm audit` to get more info.
  9. /usr/local/bin/jq-tutorial -> /usr/local/lib/node_modules/jq-tutorial/bin/jq-tutorial
  10. + jq-tutorial@0.0.5
  11. added 4 packages in 20.012s
  13. wendingding$ jq-tutorial 
  14. Run jq-tutorial with one of the following:
  15.   * pick
  16.   * objects
  17.   * mapping
  18.   * filtering
  19.   * output
  20.   * reduce
  22. wendingding$ jq-tutorial pick
  23. Pick
  24. ========================================
  25. ### Pick fields from an object
  26. `jq` retrieves named properties from objects by using `.` syntax:
  27.     $ echo '{"foo": { "bar": "a value" }}' | jq .foo
  28. Nested values are accessible as well:
  29.     $ echo '{"foo": { "bar": "a value" }}' | jq .foo.bar
  30. ### Pick elements from an array:
  31. Elements in an array may be extracted by index:
  32.     $ echo '["snap","crackle","pop"]' | jq .[1]
  33. More than one index? No problem!
  34.     $ echo '["snap","crackle","pop"]' | jq .[1, 2]
  35. We can even extract *all* elements at once by omitting the indices:
  36.     $ echo '["snap","crackle","pop"]' | jq .[]
  37. type "data?" to see dataset or "help?" for more options
  38. --------------------------------
  40. Given:    'product' (type "data?" to view)
  41. Challenge: Select the entire item (hint: don't overthink this!):
  42. >

工具(jqPlay)

jqPlay是一个基于web的jq在线测试游乐场，它提供了对JSON数据进行jq查询的基本功能，而且提供了简单的jq查询语法示例，能够对查询进行快速反馈。

基本用法演示

这里我先提供一个稍复杂的JSON数据,数据保存在/JSON-Demo/data.json路径(您可以点击此链接获取该数据)。为了演示方便，这里我将会把该文档的数据部署为RESTful API，从而创建一个模拟的API服务。在具体的处理中，将使用到名为json-server的Node模块，下面列出具体的细节。

  1. wendingding$ pwd
  2. /Users/文顶顶/Desktop/JSON-Demo
  4. wendingding$ npm install -g json-server
  5. /usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
  6. + json-server@0.14.0
  7. added 223 packages in 23.03s
  9. wendingding$ json-server -p 5000 ./data.json
  11.   \{^_^}/ hi!
  13.   Loading ./data.json
  14.   Done
  16.   Resources
  17.   http://localhost:5000/person
  19.   Home
  20.   http://localhost:5000
  22.   Type s + enter at any time to create a snapshot of the database
  23. GET /person 304 16.355 ms - -

执行$json-server -p 5000 ./data.json命令之后，我们可以在浏览器中通过http://localhost:5000/person地址来访问JSON文档中的数据，下面是显示结果。

备注：如果经常需要通过浏览器访问和显示JSON数据，建议安装相应的JSON扩展插件，我电脑Chrome安装的是JSON-handle，同类型的还有JSONView。

下面列出jq命令行工具的使用示例以及主要命令行的解读说明。

  1. wendingding$ curl http://localhost:5000/person | jq '.'
  2.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  3.                                  Dload  Upload   Total   Spent    Left  Speed
  4. 100  1047  100  1047    0     0   169k      0 --:--:-- --:--:-- --:--:--  255k
  5. [
  6.   {
  7.     "age": 18,
  8.     "name": "mitaoer",
  9.     "hasBrother": true,
  10.     "email": "mitaoer@126.com",
  11.     "interest": [
  12.       "文学",
  13.       "音乐",
  14.       "绘画",
  15.       "IT"
  16.     ],
  17.     "car": {
  18.       "type": "英菲尼迪",
  19.       "number": "京A 000001",
  20.       "price": 200012.66
  21.     }
  22.   },
  23.   {
  24.     "age": 28,
  25.     "name": "wendingding",
  26.     "hasBrother": true,
  27.     "email": "wenidngding_ios@126.com",
  28.     "interest": [
  29.       "文学",
  30.       "音乐"
  31.     ],
  32.     "car": {
  33.       "type": "奥迪",
  34.       "number": "京A 000002",
  35.       "price": 200000.66
  36.     }
  37.   },
  38.   {
  39.     "age": 23,
  40.     "name": "xiaxiaoxia",
  41.     "hasBrother": true,
  42.     "email": "mitaoer@126.com",
  43.     "interest": [
  44.       "文学",
  45.       "IT"
  46.     ],
  47.     "car": null
  48.   },
  49.   {
  50.     "age": 24,
  51.     "name": "LiuY",
  52.     "hasBrother": true,
  53.     "email": "LiuY@126.com",
  54.     "interest": [
  55.       "文学",
  56.       "音乐",
  57.       "绘画",
  58.       "IT",
  59.       "阅读",
  60.       "健身"
  61.     ],
  62.     "car": {
  63.       "type": "ATS",
  64.       "number": "京A 000003",
  65.       "price": 888888.66
  66.     }
  67.   }
  68. ]
  70. wendingding$ curl http://localhost:5000/person | jq '.[1]'
  71.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  72.                                  Dload  Upload   Total   Spent    Left  Speed
  73. 100  1047  100  1047    0     0   140k      0 --:--:-- --:--:-- --:--:--  255k
  74. {
  75.   "age": 28,
  76.   "name": "wendingding",
  77.   "hasBrother": true,
  78.   "email": "wenidngding_ios@126.com",
  79.   "interest": [
  80.     "文学",
  81.     "音乐"
  82.   ],
  83.   "car": {
  84.     "type": "奥迪",
  85.     "number": "京A 000002",
  86.     "price": 200000.66
  87.   }
  88. }
  90. wendingding$ curl http://localhost:5000/person | jq '.[1].name'
  91.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  92.                                  Dload  Upload   Total   Spent    Left  Speed
  93. 100  1047  100  1047    0     0   171k      0 --:--:-- --:--:-- --:--:--  255k
  94. "wendingding"
  96. wendingding$ curl http://localhost:5000/person | jq '.[1].email'
  97.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  98.                                  Dload  Upload   Total   Spent    Left  Speed
  99. 100  1047  100  1047    0     0   106k      0 --:--:-- --:--:-- --:--:--  127k
  100. "wenidngding_ios@126.com"
  102. wendingding$ curl http://localhost:5000/person | jq '.[1] | {name,age}'
  103.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  104.                                  Dload  Upload   Total   Spent    Left  Speed
  105. 100  1047  100  1047    0     0   161k      0 --:--:-- --:--:-- --:--:--  204k
  106. {
  107.   "name": "wendingding",
  108.   "age": 28
  109. }
  111. wendingding$ curl http://localhost:5000/person | jq '.[1] | {newName:.name,newAge:.age}'
  112.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  113.                                  Dload  Upload   Total   Spent    Left  Speed
  114. 100  1047  100  1047    0     0   153k      0 --:--:-- --:--:-- --:--:--  204k
  115. {
  116.   "newName": "wendingding",
  117.   "newAge": 28
  118. }
  120. wendingding$ curl http://localhost:5000/person | jq '.[] | select (.age >=24)'
  121.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  122.                                  Dload  Upload   Total   Spent    Left  Speed
  123. 100  1047  100  1047    0     0   167k      0 --:--:-- --:--:-- --:--:--  255k
  124. {
  125.   "age": 28,
  126.   "name": "wendingding",
  127.   "hasBrother": true,
  128.   "email": "wenidngding_ios@126.com",
  129.   "interest": [
  130.     "文学",
  131.     "音乐"
  132.   ],
  133.   "car": {
  134.     "type": "奥迪",
  135.     "number": "京A 000002",
  136.     "price": 200000.66
  137.   }
  138. }
  139. {
  140.   "age": 24,
  141.   "name": "LiuY",
  142.   "hasBrother": true,
  143.   "email": "LiuY@126.com",
  144.   "interest": [
  145.     "文学",
  146.     "音乐",
  147.     "绘画",
  148.     "IT",
  149.     "阅读",
  150.     "健身"
  151.   ],
  152.   "car": {
  153.     "type": "ATS",
  154.     "number": "京A 000003",
  155.     "price": 888888.66
  156.   }
  157. }
  159. wendingding$ curl http://localhost:5000/person | jq '.[1,3] | {name,email}'
  160.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  161.                                  Dload  Upload   Total   Spent    Left  Speed
  162. 100  1047  100  1047    0     0   162k      0 --:--:-- --:--:-- --:--:--  255k
  163. {
  164.   "name": "wendingding",
  165.   "email": "wenidngding_ios@126.com"
  166. }
  167. {
  168.   "name": "LiuY",
  169.   "email": "LiuY@126.com"
  170. }
  172. wendingding$ curl http://localhost:5000/person | jq '.[1,3] | [{name,email}]'
  173.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  174.                                  Dload  Upload   Total   Spent    Left  Speed
  175. 100  1047  100  1047    0     0   165k      0 --:--:-- --:--:-- --:--:--  255k
  176. [
  177.   {
  178.     "name": "wendingding",
  179.     "email": "wenidngding_ios@126.com"
  180.   }
  181. ]
  182. [
  183.   {
  184.     "name": "LiuY",
  185.     "email": "LiuY@126.com"
  186.   }
  187. ]
  188. wendingding$ touch test.json
  190. wendingding$ curl http://localhost:5000/person | jq '.[1,3] | [{name,email}]' > test.json
  191.   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
  192.                                  Dload  Upload   Total   Spent    Left  Speed
  193. 100  1047  100  1047    0     0   143k      0 --:--:-- --:--:-- --:--:--  204k
  194. wendingding$ cat test.json 
  195. [
  196.   {
  197.     "name": "wendingding",
  198.     "email": "wenidngding_ios@126.com"
  199.   }
  200. ]
  201. [
  202.   {
  203.     "name": "LiuY",
  204.     "email": "LiuY@126.com"
  205.   }
  206. ]

主要命令说明[为方便阅读，命令行中的xxx均代表的是http://localhost:5000/person路径]

$ curl xxx | jq '.' 获取API返回的所有JSON数据。
$ curl xxx | jq '.[1]' 获取JSON文档中person数组的第2个元素内容。
$ curl xxx | jq '.[1].name' 获取JSON文档中person数组的第2个元素(对象)中的name属性值。
$ curl xxx | jq '.[1] | {name,age}' 获取数组第2个元素(对象)的name和age键值对组成新对象。
$ curl xxx | jq '.[1,3] | {name,email}' 获取数组第2和第4个元素中的name和email值组成对象。
$ curl xxx | jq '.[] | select (.age >=24)' 获取JSON文档中所有age属性值>=24的对象元素集合。

补充 如果需要在Node中使用jq,那么可以安装并使用require导入node-jq模块。

工具002 → JSONPath

定位 是一款可用于对JSON文档进行搜索和数据提取操作类库。
历史 由Stefan Goessner于2007年开发，最开始的版本使用JavaScript实现。
功能 能够对JSON文档进行搜索和数据提取，它的查询语法基于XPath实现。
生态 JSONPath没有提供命令行操作实现，但提供了优秀的在线测试工具和Node模块。
优势

  • 具有丰富的查询语法。
  • 查询语句可以返回文档中的多个元素。
  • 大多数的主流平台都对JSONPath提供支持。
  • 拥有很高的社区使用率，优秀的在线测试工具对开发者更友好。

资料 jsonpath Node模块 、在线测试网站 、Github仓库、Stefan Goessner主页

语法 描述
$ 根节点
@ 当前节点的筛选器属性处理
* 通配符，匹配任何属性名称
.. 通配符，匹配任意层次的节点
[] 迭代器标示，同数组索引
[,] 迭代器标示，迭代器多选
[start:end] 数组切片运算符
[?(<expression>)] 过滤表达式，求值必须为布尔值

查询语法示例

  1. //备注：参考的JSON数据为前文使用的data.json文件
  2. $                       获取整个JSON文档的内容
  3. $.person                获取JSON文档中person数组的内容
  4. $.person.length         获取JSON文档中person数组的长度(元素个数)
  6. $.person[0]             获取JSON文档中person数组第一个元素的内容
  7. $.person[:1]            获取JSON文档中person数组第一个元素的内容
  8. $.person[-1:]           获取JSON文档中person数组最后一个元素的内容
  9. $.person[(@.length-1)]  获取JSON文档中person数组最后一个元素的内容
  11. $.person[:2]            获取JSON文档中person数组前两个元素的内容
  12. $.person[0,3]           获取JSON文档中person数组第1和4第个元素的内容
  13. $.person[0::2]          获取JSON文档中person数组指定元素的内容(隔一个元素抽取)
  14. $.person[:2].name       获取JSON文档中person数组前两个元素中的name值
  16. $..name                 获取JSON文档中所有的name子元素内容
  17. $.person[?(@.age >23)]  获取JSON文档中age值大于23的所有元素
  18. $.person[?(@.age >23)].age  获取JSON文档中age值大于23的所有元素中的age值信息
  19. $.person[?(@.age >20 && @.interest.length == 2)].name 满足多个条件的筛选

工具(jsonpath在线测试网站)

jsonpath提供了对应的在线测试网站，给指定JSON文档输入对应的jsonpath查询语句能够快速看到最终效果。使用该测试工具来可以"重量级的"复杂JSON数据进行快速的筛选，输入查询语句后马上就能够在右侧看到查询后的结果。如果开发者原本不了解查询语法，那也可以通过该工具来快速的学习，下面给出简单的图示。

**注意** [jsonpath](https://jsonpath.org/)在线测试工具在使用的时候，总是会把查询的结果保存到[ ]的结构中。

工具(node模块jsonpath)

JSONPath本身没有命令行工具，除了上面介绍的在线测试网站之外，我们还能在代码中使用node社区发布的jsonpath模块实现JSON的搜索任务。下面给出一个简单的单元测试示例(列出源码和执行情况)。

001 先列出单元测试相关的代码

  1. //jsonpath-test.js文件内容
  2. var unirest  = require("unirest");
  3. var jsonPath = require("jsonpath");
  4. var expect   = require("chai").expect;
  6. describe("wendingding-test",function(){
  7.     var request ;
  8.     beforeEach(function(){
  9.         request = unirest.get("http://localhost:5000/person")
  10.         .header("Accept","application/json");
  11.     })
  13.     it("return 200 状态码",function(done){
  14.         request.end(function(response){
  15.             expect(response.statusCode).to.eql(200);
  16.             expect(response.headers["content-type"])
  17.             .to.eql("application/json; charset=utf-8");
  18.             done();
  19.         })
  20.     })
  22.     it("return 所有的JOSN数据",function(done){
  23.         request.end(function(response){
  24.             expect(response.body.length).to.eql(4);
  25.             done();
  26.         })
  27.     })
  29.     it("return 所有的JOSN数据中第一个元素      -- $[1]",function(done){
  30.         request.end(function(response){
  31.             var resultData = jsonPath.query(response.body,"$[1]");
  32.             expect(resultData[0].name).to.eql("wendingding");
  33.             done();
  34.         })
  35.     })
  37.     it("return 所有的JOSN数据中最后一个元素[1] -- $[-1:]",function(done){
  38.         request.end(function(response){
  39.             var resultData = jsonPath.query(response.body,"$[-1:]");
  40.             expect(resultData[0].email).to.eql("LiuY@126.com");
  41.             done();
  42.         })
  43.     })
  45.     it("return 所有的JOSN数据中最后一个元素[2] -- $[(@.length-1)]",function(done){
  46.         request.end(function(response){ 
  47.             var resultData = jsonPath.query(response.body,"$[(@.length-1)]");
  48.             expect(resultData[0].email).to.eql("LiuY@126.com");
  49.             done();
  50.         })
  51.     })
  53.     it("return 所有的JOSN数据中满足条件元素     -- $[?(@.age >= 23)]",function(done){
  54.         request.end(function(response){
  55.             var data = response.body;  
  56.             var resultData = jsonPath.query(data,"$[?(@.age >= 23)]");
  57.             //console.log(resultData)
  58.             expect(resultData.length).to.eql(3);
  59.             for(var i = 0 ;i<resultData.length;i++)
  60.             {
  61.                 expect(resultData[i].age).to.be.at.least(23);
  62.             }
  63.             done();
  64.         })
  65.     })
  66. })

002 列出代码的具体执行细节

  1. wendingding$ pwd 
  2. /Users/文顶顶/Desktop/jsonPath-demo
  3. wendingding$ npm test
  5. > jsonpath-demo@1.0.0 test /Users/文顶顶/Desktop/jsonPath-demo
  6. > mocha
  10.   wendingding-test
  11.     ? return 200 状态码
  12.     ? return 所有的JOSN数据
  13.     ? return 所有的JOSN数据中第一个元素      -- $[1]
  14.     ? return 所有的JOSN数据中最后一个元素[1] -- $[-1:]
  15.     ? return 所有的JOSN数据中最后一个元素[2] -- $[(@.length-1)]
  16.     ? return 所有的JOSN数据中满足条件元素    -- $[?(@.age >= 23)]
  19.   6 passing (92ms)

003 代码说明

〇 示例代码中使用了Mocha、Unirest测试框架，jsonpath查询模块以及Chai模块中的断言结构。
① 示例代码中的每一个it就代表着一个测试用例。
② 示例代码中我们在Mocha的beforeEach()方法中对请求信息进行了配置。
③ 示例代码中在describe语句定义的范围内，每次执行测试用例之前都会先运行一次beforeEach方法。

004 执行备注

这里简单说明上面代码的执行环境和处理过程。

  1. [1]  在电脑中指定的路径创建文件夹，并通过命令行进入到该路径。
  3. $ mkdir JSON-TEST
  4. $ cd JSON-TEST/
  5. $ pwd
  6.     /Users/文顶顶/Desktop/JSON-TEST
  8. [2] 初始化并安装必要的node模块。
  10. $ npm init  //默认回车即可
  11. $ npm install -g mocha
  12. $ npm install --save-dev mocha
  13. $ npm install --save-dev unirest
  14. $ npm install -save-dev jsonpath
  15. $ npm install --save-dev chai
  17. [3] 修改package.json文件中的scripts项为"test": "mocha"。
  19. wendingding$ cat package.json 
  20. {
  21.   "name": "json-test",
  22.   "version": "1.0.0",
  23.   "description": "",
  24.   "main": "index.js",
  25.   "scripts": {
  26.     "test": "mocha"
  27.   },
  28.   "author": "",
  29.   "license": "ISC",
  30.   "devDependencies": {
  31.     "chai": "^4.2.0",
  32.     "jsonpath": "^1.0.0",
  33.     "mocha": "^5.2.0",
  34.     "unirest": "^0.5.1"
  35.   }
  36. }
  38. [4] 在当前目录下创建test文件夹，并在该文件夹中创建测试文件(此处命名为json-test.js)。
  40. $ mkdir test
  41. $ cd test/
  42. $ touch json-test.js
  44. [5] 编辑json-test.js文件的内容(前文已经给出),列出文件目录。
  45. .
  46. ├── node_modules
  47. │   ├── JSONSelect
  48. │   ...省略
  49. │   ├── chai
  50. │   ├── jsonpath
  51. │   ├── mocha
  52. │   ├── unirest
  53. │   └── xtend
  54. ├── package-lock.json
  55. ├── package.json
  56. └── test
  57.     └── json-test.js
  59. [6] 执行测试。
  61. $ npm test

工具003 → JSON Pointer

JSON Pointer本身是一项用于获取JSON文档中特定值的标准。JSON Pointer设计的主要目标在于支持JSON Schema标准中的$ref（请参考JSON进阶一文）。

目前，大多数的主流平台(包括Node\Ruby on Rails\Ptyhon\Java等)都已经包含JSON Pointer相关的类库。Java，Jackson已支持JSON Pointer查询语法，javaEE 8将提供原生支持；Node中则可以在社区中找到并使用json-pointer模块来对JSON文档进行处理。

语法 描述
/data 获取JSON文档中某个key对应的所有数据
/data/index 获取指定索引对应的数据
/data/index/key 获取指定索引对应的数据并通过key来取值

JSON Pointer的查询语法简洁高效，其工作机制是以/来表示路径分隔，以索引|下标来获取指定的内容，索引总是从0开始。下面给出简短的查询语法示例：

  1. //备注：参考的JSON数据为前文使用的data.json文件
  2. /person                 获取JSON文档中person的内容
  3. /person/0               获取JSON文档中person数组的第一项内容
  4. /person/0/name          获取JSON文档中person数组的第一项内容中的name值
**注意** JSON Pointer标准中，查询操作的结果总只包含数据值而不会包含相关的键名。

这里将使用node社区的json-pointer模块简单演示node平台中对JSON文档的处理。下面列出核心单元测试代码(在测试的时候需要先安装对应的模块)。

  1. var expect = require("chai").expect;
  2. var pointer = require("json-pointer");
  3. var unirest = require("unirest");
  5. describe("wendingding-test",function(){
  6.     var request ;
  7.     beforeEach(function(){
  8.         request = unirest.get("http://localhost:5000/person")
  9.         .header("Accept","application/json");
  10.     })
  12.     it("return 200 状态码",function(done){
  13.         request.end(function(response){
  14.             expect(response.statusCode).to.eql(200);
  15.             expect(response.headers["content-type"])
  16.             .to.eql("application/json; charset=utf-8");
  17.             done();
  18.         })
  19.     })
  21.     it("return 所有的JOSN数据",function(done){
  22.         request.end(function(response){
  23.             expect(response.body.length).to.eql(4);
  24.             done();
  25.         })
  26.     })
  28.     it("return Person数组中的第一个元素 /person/0",function(done){
  29.         request.end(function(response){
  30.             var resultData = pointer.get(response.body,"/0");
  31.             console.log("\n",resultData,"\n");
  32.             expect(resultData.name).to.eql("mitaoer");
  33.             done();
  34.         })
  35.     })
  37.     it("return Person数组中的第三个元素中interest的值 /person/2/interest",function(done){
  38.         request.end(function(response){
  39.             var resultData = pointer.get(response.body,"/2/interest");
  40.             console.log("\t",resultData);
  41.             expect(resultData.length).to.eql(2);
  42.             done();
  43.         })
  44.     })
  45. })

简单列出执行情况：

  1. wendingding$ npm test
  2. > json-pointer-demo@1.0.0 test /Users/文顶顶/Desktop/JSON-Pointer
  3. > mocha
  5.   wendingding-test
  6.     ? return 200 状态码
  7.     ? return 所有的JOSN数据
  9.       { age: 18,
  10.         name: 'mitaoer',
  11.         hasBrother: true,
  12.         email: 'mitaoer@126.com',
  13.         interest: [ '文学', '音乐', '绘画', 'IT' ],
  14.         car: { type: '英菲尼迪', number: '京A 000001', price: 200012.66 } 
  15.       } 
  16.     ? return Person数组中的第一个元素 /person/0
  17. 	    [ '文学', 'IT' ]
  18.     ? return Person数组中的第三个元素中interest的值 /person/2/interest
  20.   4 passing (66ms)

JSON转换

JSON → HTML结构(渲染)

将JSON数据转换(处理)为HTML的操作我们应该都很熟悉，在前端开发和移动端开发领域中，这一部分的操作通常和网络请求紧密联系，业务流程基本都是先发请求获取服务器端返回的(JSON)数据，然后通过序列化的方法来对数据进行解析，也就是反序列化处理(通常是将JSON数据转换为编程语言中对应的数据结构比如数组或者是对象)，最终再根据得到的数据来更新UI。

现在前端开发中这都属于基本操作，甚至像Vue这样类似的框架中数据绑定已经是其最最基础的一部分了。虽然如此，为了文章的完整性，这里还是会简单介绍Mustache和Handlebars两个类库在JSON转换中的运用。

Mustache

简介 Mustache使用声明式模板来转换数据格。
资料 Mustache、Mustache Github、Mustache 5说明文档
优势 使用模板可以从代码中抽取具体的数据信息，并将数据保存在外部的文件中，实现关注点分离。

接下来我将通过一个简短的示例来说明Mustache的语法以及其使用方式，您可以点击该链接获取完整的项目内容。为了对介绍Mustache的使用，这里我列出项目中的部分内容并做简要说明。

001 列出模板核心内容

  1. //备注：../Tem-TEST/src/index.mustache文件的核心内容
  2. <div id="app">
  3.     <table id="tb">
  4.         <tr>
  5.             <th>name</th>
  6.             <th>age</th>
  7.             <th>email</th>
  8.             <th>interest</th>
  9.             <th>car-type</th>
  10.             <th>car-number</th>
  11.         </tr>
  12.         {{#person}}
  13.         <tr>
  14.             <td>{{name}}</td>
  15.             <td>{{age}}</td>
  16.             <td>{{email}}</td>
  17.             <td>{{interest.1}}</td>
  18.             {{#car}}
  19.                 <td>{{type}}</td>
  20.                 <td>{{number}}</td>
  21.             {{/car}}
  22.         </tr>
  23.         {{/person}}
  24.     </table>
  25. </div>

002 列出单元测试代码

  1. //备注：../Tem-TEST/test/mustache-test.js文件内容
  2. var fs = require("fs");
  3. var expect = require("chai").expect;
  4. var jsonfile = require("jsonfile");
  5. var mustache = require("mustache");
  7. describe("wendingding-mustache-test",function(){
  8.   
  9.     //文件的目录结构：json文件路径 + 模板文件路径 + 目标文件路径
  10.     var jsonFileFullPath     = __dirname + "/../src/data.json";
  11.     var templateFileFullPath = __dirname + "/../src/index.mustache";
  12.     var targetFileFunllPath  = __dirname + "/../src/index.html";
  14.     it("JSON -> HTML",function(done){
  15.         jsonfile.readFile(jsonFileFullPath,function(readJsonFileError,jsonData){
  16.             if(!readJsonFileError)
  17.             {
  18.                 fs.readFile(templateFileFullPath,"utf8",function(readTemplateFileError,templateData){
  19.                     if(!readTemplateFileError)
  20.                     {
  21.                         var template = templateData.toString();
  22.                         var html = mustache.render(template,jsonData);
  24.                         fs.writeFile(targetFileFunllPath, html,  function(errorStatus) {
  25.                             if (!errorStatus) {
  26.                                 console.log("转换成功并保存为HTML文件！");
  27.                                 done();
  28.                             }else
  29.                             {
  30.                                 done(errorStatus);
  31.                             }  
  32.                          }); 
  33.                     }else
  34.                     {
  35.                         done(readTemplateFileError)
  36.                     }
  37.                 })
  38.             }else
  39.             {
  40.                 done(readJsonFileError)
  41.             }
  42.         })
  43.     })
  44. })

通过$ npm test执行单元测试代码，将会执行JSON数组到HTML的转换，处理完毕后结果保存到index.html文件中，下面贴出该页面的效果图。

Mustache模板工作机制
? 模板基于HTML, Mustache使用JSON数据来解析标签。
? 模板中的标签可以表示单个字段，使用双大括号的形式来包裹。
? 模板中的区块都需要由开始标签和结尾标签组成，例如上例中的person。
? 模板中的区块对应JSON数据中的数组或者是对象，例如上例中的person和car。
? 模板中的区块可以为内部的标签定义上下文，比如car区块内部的type和number。

Mustache工具(命令行 && 在线网站)

Mustache除上面演示的使用方式之外，还能直接在命令行中使用，下面给出简短的使用示例。

  1. (1) 全局安装Mustache模块。
  2. $ npm install -g mustache 
  4. (2) 执行mustache命令转换。
  5. $ mustache /Users/文顶顶/Desktop/Tem-TEST/src/data.json /Users/文顶顶/Desktop/Tem-TEST/src/index.mustache > target.html
  7. $ open target.html

这里再推荐一款好用的在线模板编辑器Architect，使用该工具可以有效的简化测试和开发模板的工作，当修改模板的时候，可以实时的看到渲染的结果。该网站支持多款主流模板引擎(包括doT.js、Dustjs、EJS、Handlebars.js、Hogan.js、Jade、Mustache、Nunjucks和Underscore.js等)的编辑和渲染，可以有效的加速开发和调试工作。

Handlebars

简介 Handlebars是Mustache的扩展，使用hash或对象来渲染模板中的标签。
资料 Handlebars、Handlebars Github、Architect、在线测试网站、Handlebars的Node模块
说明 Handlebars与Mustache高度兼容，相对而言Handlebars自身增加了一些特性来增强转换操作。它们的差异主要在于Handlebars提供了if和unless等内联的辅助语句且允许开发者通过注册自定义辅助语义的方式来进行扩展，功能更加强大。

优势

  • 模板语言丰富，能满足大多数的转换需求。
  • 拥有优秀的在线编辑和测试工具用起来更加方便。
  • 采用声明式，但也支持在自定义辅助指令中编写逻辑代码。
  • 因为拥有内置的条件逻辑，所以在渲染的时候几乎可以不用编写额外的处理代码。
  • 跨平台的支持度很好，支持JavaScript、Node.js、Java和Ruby on Rails等平台。

这里将简单介绍Handlebars在Node中的使用，并提供node和命令行两种执行示例供参考，更多的细节请自行参考其官网文档。

001 列出模板文件的核心代码

  1. //备注(1)：/Users/文顶顶/Desktop/Handlebars-Test/index.hbs文件的核心内容
  2. //备注(2)：转换过程中使用的json数据为前文中的data.json文件
  3. <div id="app">
  4.     <table id="tb">
  5.         <tr>
  6.             <th>name</th>
  7.             <th>age</th>
  8.             <th>email</th>
  9.             <th>car-type</th>
  10.             <th>car-Other</th>
  11.         </tr>
  12.         {{#each person}}
  13.         {{#if car}}
  14.         <tr>
  15.             <td>{{name}}</td>
  16.             <td>{{age}}</td>
  17.             <td>{{email}}</td>
  18.             <td>{{car.type}}</td>
  19.             <td>号码：{{car.number}}  |  价格：{{car.price}}</td>
  20.         </tr>
  21.         {{/if}}
  22.         {{/each}}
  23.     </table>
  24. </div>

002 列出命令行执行的细节

  1. (1) 先通过命令行全局安装hb-interpolate模块
  2. $ npm install -g hb-interpolate
  4. (2) 执行渲染命令。
  5. $ hb-interpolate -j /Users/文顶顶/Desktop/Handlebars-Test/data.json -t  /Users/文顶顶/Desktop/Handlebars-Test/index.hbs > target.html

说明 上面的命令行中-j表示后面跟的是json文件，-t表示后面跟的是模板文件，转换后的结果被输出并保存到target.html文件中。在模板文件中的#each表示遍历数组，#if是逻辑控制指令，在渲染的时候过滤了car为null的数据情况，浏览器打开target.html文件可以看到下面的显示结果。

003 Handlebars在Node中的使用

  1. //备注：handlebars-test.js文件的内容
  2. //001 导入node模板
  3. var fs          = require("fs");
  4. var jsonfile    = require("jsonfile");
  5. var handlebars  = require("handlebars");
  7. //002 处理文件路径
  8. var jsonFullPath     = __dirname + "/data.json";
  9. var templateFullPath = __dirname + "/index.hbs";
  10. var outPutFullPath  = __dirname + "/output.html";
  12. //003 读取JSON文件的内容
  13. jsonfile.readFile(jsonFullPath,function(readJsonError,jsonData){
  14.     if(!readJsonError)
  15.     {
  16.         //004 读取模板文件的内容
  17.         fs.readFile(templateFullPath,"utf8",function(readTemplateError,templateData){
  18.             if(!readTemplateError)
  19.             {
  20.                 //005 JSON数据 + 模板 = > 渲染
  21.                 var template = handlebars.compile(templateData);
  22.                 var html = template(jsonData);
  24.                 //006 把渲染后的结果保存到指定文件中
  25.                 fs.writeFile(outPutFullPath, html,  function(errorStatus) {
  26.                     if(! errorStatus)
  27.                     {
  28.                         console.log("渲染成功！请打开"+outPutFullPath+"查看结果!");
  29.                     }
  30.                 })
  31.             }
  32.         })
  33.     }
  34. })

说明 在指定文件目录中(我这里是/Users/文顶顶/Desktop/Handlebars-Test)创建handlebars-test.js文件，并编写上述对应的代码。通过命令行安装必要的Node模块，执行即可得到前文所示的图片结果。下面给出命令行执行的细节：

  1. (1) 切换到当前目录
  2. $ cd Handlebars-Test/
  3. $ pwd 
  4. /Users/文顶顶/Desktop/Handlebars-Test
  6. (2) 使用npm初始化并安装必要的Node模块。
  7. $ npm init
  8. $ npm install --save-dev jsonfile
  9. $ npm install --save-dev handlebars
  11. (3) 执行。
  12. $ node handlebars-test.js

补充 Mustache和Handlebars除用来把JSON转换为HTML(渲染)之外，还能够对JSON数据本身的格式进行转换工作(主要是对JSON数据进行二次处理，譬如删减或结构调整等)，但Mustache在具体进行格式化的时候因为无法确定当前所处理的元素是否为数组或对象的最后一个元素，所以可能存在"无谓逗号"的问题。Handlebars可以通过使用#unless 和@last的形式对"无谓逗号"的问题进行规避，具体的细节请参考其官方文档说明。另外，JSON格式转换的工具在Node环境中推荐使用Json2Json和jsonapter，也可以参考JSON Patch和JSON-T的实现，这里不再展开。

JSON数据 ←→ XML文档

最后简单介绍JSON数据和XML数据之间的相互转换，虽然这种场景通常可能很少出现(因为开发中常见的场景一般是对JSON或XML数据进行序列化或反序列化处理，JSON和XML两种数据格式之间直接相互转换的情况真的很少见)。

XML全称Extensible Markup Language(可扩展标记语言)，主要流行于(1998~2008年)。同JSON类似，XML也能用于表示和传输数据，现在很多大公司的API都提供XML和JSON两种格式的数据响应。

XML数据和JSON数据的转换难易程度主要看XML文档的结构，如果文档中所有的数据都以XML元素和文本的方式保存那么转换为JSON数据是比较简单的，如果XML文档的元素上存在这大量的属性节点(早年的时候很多XML的设计人员把数据保存在XML的属性节点上，这样有助于减少文件体积和简化多平台之间的转换工作)，那么这种转换就会比较困难。不过，好在我们可以使用很多现成的工具(譬如：Parker和JsonML以及Badgerfish等)来完成这种具体的转换工作。

对于上面这些工具的具体使用情况，大家可以自行了解。需要说明的是即便如此，这些工具仍然存在很大的局限性(譬如文档不全、缺乏跨平台的支持和完整实现以及有损转换等等)。所以，在实际的使用过程中其实可以考虑先把JSON|XML转换为当前编程语言中的数据结构形式，然后再转换成XML|JSON)。下面以JavaScript(Node)平台为例加以简单说明。

XML文档 → JSON数据

  • 先把XML数据解析为JavaScript中的对象|数组(xml2js模块)。
  • 把JavaScript的对象|数组序列化为JSON格式的数据(JSON.stringify方法)。

列出核心示例代码

  1. var xmlFullPath      = __dirname + "/data.xml";
  2. fs.readFile(xmlFullPath,"utf8",function(readFileError,xmlData){
  3.     var parser = new xml2js.Parser();
  4.     parser.parseString(xmlData,function(error,xmlObj){
  5.         console.log(JSON.stringify(xmlObj,null,2));
  6.     })
  7. })

JSON数据 → XML文档

  • 先将JSON数据解析(反序列化)为JavaScript中的对象|数组数据(eval函数或者是JSON.parse方法)。
  • 根据JavaScript数据来生成(marshaling)对应的XML文档(xml2js模块)

这里列出json数据转换为xml数据的代码示例。

  1. //001 导入node模板
  2. var fs          = require("fs");
  3. var xml2js      = require("xml2js");
  4. var jsonfile    = require("jsonfile");
  6. //002 处理文件路径
  7. var jsonFullPath     = __dirname + "/data.json";
  8. var xmlFullPath      = __dirname + "/data.xml";
  10. //003 读取JSON文件的内容并解析为JavaScript对象(jsonData)
  11. jsonfile.readFile(jsonFullPath,function(readJsonError,jsonData){
  12.     if(!readJsonError)
  13.     {
  14.         //004 创建并返回bulider实例对象
  15.         var bulider = new xml2js.Builder();
  16.         //005 使用bulider对象将jsonData转换为xml格式的字符串
  17.         var xml = bulider.buildObject(jsonData);
  18.         //006 写文件操作(把最终的数据保存到指定的文件中)
  19.         fs.writeFile(xmlFullPath, xml,  function(errorStatus) {
  20.             if(! errorStatus)
  21.             {
  22.                 console.log("json->XML 转换成功");
  23.                 console.log(xml);
  24.             }
  25.         })
  26.     }
  27. })

列出用于转换的初始json数据。

  1. {
  2.     "person": [
  3.       {
  4.         "age": 18,
  5.         "name": "mitaoer",
  6.         "hasBrother": true,
  7.         "email": "mitaoer@126.com",
  8.         "car": {
  9.           "type": "英菲尼迪",
  10.           "number": "京A 000001",
  11.           "price": 200012.66
  12.         }
  13.       },
  14.       {
  15.         "age": 28,
  16.         "name": "wendingding",
  17.         "hasBrother": true,
  18.         "email": "wenidngding_ios@126.com",
  19.         "car": {
  20.           "type": "奥迪",
  21.           "number": "京A 000002",
  22.           "price": 200000.66
  23.         }
  24.       }
  25.     ]
  26. }

列出最终输出的xml数据内容。

  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  2. <person>
  3.   <age>18</age>
  4.   <name>mitaoer</name>
  5.   <hasBrother>true</hasBrother>
  6.   <email>mitaoer@126.com</email>
  7.   <car>
  8.     <type>英菲尼迪</type>
  9.     <number>京A 000001</number>
  10.     <price>200012.66</price>
  11.   </car>
  12.   <age>28</age>
  13.   <name>wendingding</name>
  14.   <hasBrother>true</hasBrother>
  15.   <email>wenidngding_ios@126.com</email>
  16.   <car>
  17.     <type>奥迪</type>
  18.     <number>京A 000002</number>
  19.     <price>200000.66</price>
  20.   </car>
  21. </person>
注意：如果JSON数据中存在数组这种结构那么使用xml2js模块的处理其实不甚理想，更新信息请参考[官方文档说明](https://www.npmjs.com/package/xml2js)。

原文链接：http://www.cnblogs.com/wendingding/p/15755607.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号