D3.js以及通用JS(JavaScript)读取并解析服务器端JSON的注意事项
来源:互联网 发布:hana数据库安全防护 编辑:程序博客网 时间:2024/06/05 05:40
这个需求其实挺明确的,但是网上搜出来的教程都乱七八糟,觉得实在需要自己总结一下。
D3.js目前已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架估计会在今后更加流行(据说其作者Mike Bostock开始全职开发了,之前是负责纽约时报数据可视化的工程师,他本人也从纽约搬家到了旧金山……)。按照这里的介绍:https://github.com/mbostock/d3/wiki/API-Reference,D3.js实际上有专门读取JSON数据的API,所以其实D3.js读服务器端发布的JSON是非常简单的事情,这里我给出一段示例代码:
d3.json("http://localhost:8080/XXXX/datasource/HTTP", function handle_json_data(data){ console.log(data) console.log(data.results[0]); var series=data.results[0].series; var contents=series[0]; var values=contents.values console.log(values); });
后面这些语句是我在测试过程中用来调试用的,因为实在对JS不了解,所以用这种方法稍微深入了解一下。下面针对后面这些语句进行一些讨论:
按照网上各种教程的介绍,从服务器端取到的JSON字符串应该先使用eval函数转成JS能够处理的JSON对象,如下面几篇博客:http://blog.csdn.net/beyond0851/article/details/9285771 以及 http://www.cnblogs.com/fishtreeyu/archive/2011/11/05/2237190.html ,其中第一篇博客最后的结论看得我也是醉了。
但是我们看到上面的代码中并没有转换的过程,可以认为D3.js已经封装了上述处理过程。另外,对于一些复杂的JSON结构,应该怎么样进行处理呢?我上面代码中处理的JSON数据如下所示:
{ "results": [ { "series": [ { "name": "HTTP", "columns": [ "time", "durationTime" ], "values": [ [ "2015-06-18T07:31:44.514Z", 23137050 ], [ "2015-06-18T07:31:46Z", 200 ], [ "2015-06-18T07:31:46.123Z", 300 ], [ "2015-08-08T18:33:50.61Z", 763 ], [ "2015-08-08T18:33:51.505Z", 10628 ], [ "2015-08-08T18:33:53.31Z", 43 ], [ "2015-08-08T18:34:00.223Z", 285 ], [ "2015-08-08T18:34:02.184Z", 1491 ], [ "2015-08-08T18:34:02.295Z", 43 ], [ "2015-08-08T18:34:03.839Z", 36 ], [ "2015-08-08T18:34:04.179Z", 1174 ], [ "2015-08-09T06:33:51.622Z", 768 ], [ "2015-08-09T06:33:52.511Z", 11371 ], [ "2015-08-09T06:33:54.721Z", 42 ], [ "2015-08-09T06:33:56.031Z", 98 ], [ "2015-08-09T06:33:57.969Z", 33 ], [ "2015-08-09T06:34:03.951Z", 1376 ] ] } ] } ]}大家可以结合我上面的代码看一下处理过程,实际上记住一条原则就可以:字段名前面是大括号的,直接用“.”号取,有中括号的情况下,要用[0],[1]这种数组操作首先把大括号或者字段名先取出来。
0 0
- D3.js以及通用JS(JavaScript)读取并解析服务器端JSON的注意事项
- D3.js读取外部json数据
- D3.js如何读取json文件
- JavaScript中解析JSON --- json.js 、 json2.js 以及 json3.js的使用区别
- JS Json的注意事项
- js读取解析JSON数据(扩展)
- javascript d3.js
- js读取解析JSON数据
- 【d3.js学习--03】d3.json
- js JSON的读取
- 服务器端的Javascript----Node.js
- JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
- [d3.js] D3.JS 基于javascript的图表展示库<一>----简单介绍
- js读取服务器端的txt文件
- d3.js——csv表格的读取
- js读取解析JSON类型数据
- js读取解析JSON类型数据
- js读取解析JSON类型数据
- 鲁棒图与系统需求分析
- android中canvas的clipRect和concate调用顺序不同导致的图像效果不同。
- 写了一个简单的微信公众号(几乎不需要什么基础就能看懂)
- strust2学习
- Sqlserver Merge
- D3.js以及通用JS(JavaScript)读取并解析服务器端JSON的注意事项
- 如何获取函数传入数组的元素个数——谈数组的退化和引用
- HDU 5372 Segment Game
- java.lang.NullPointerException:
- LoadRunner录制脚本,报连接不到服务器的提示信息 :Request Connection: Remote Serve
- ASP.NET-MVC4--Layout母版页面传入数据Model模型
- ThreadLocal理解与使用
- python中进程通信之signal信号
- await/signal/lock实现生产消费者模式