D3.js以及通用JS(JavaScript)读取并解析服务器端JSON的注意事项
2015-08-12 11:39
591 查看
这个需求其实挺明确的,但是网上搜出来的教程都乱七八糟,觉得实在需要自己总结一下。
D3.js目前已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架估计会在今后更加流行(据说其作者Mike
Bostock开始全职开发了,之前是负责纽约时报数据可视化的工程师,他本人也从纽约搬家到了旧金山……)。按照这里的介绍:https://github.com/mbostock/d3/wiki/API-Reference,D3.js实际上有专门读取JSON数据的API,所以其实D3.js读服务器端发布的JSON是非常简单的事情,这里我给出一段示例代码:
后面这些语句是我在测试过程中用来调试用的,因为实在对JS不了解,所以用这种方法稍微深入了解一下。下面针对后面这些语句进行一些讨论:
按照网上各种教程的介绍,从服务器端取到的JSON字符串应该先使用eval函数转成JS能够处理的JSON对象,如下面几篇博客:/article/9849180.html 以及 /article/6236559.html ,其中第一篇博客最后的结论看得我也是醉了。
但是我们看到上面的代码中并没有转换的过程,可以认为D3.js已经封装了上述处理过程。另外,对于一些复杂的JSON结构,应该怎么样进行处理呢?我上面代码中处理的JSON数据如下所示:
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对象,如下面几篇博客:/article/9849180.html 以及 /article/6236559.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]这种数组操作首先把大括号或者字段名先取出来。
相关文章推荐
- js获取当前域名、Url、相对路径和参数
- 在C#中调用VBScript和JavaScript等脚本的实现
- javascript实现点击单选按钮链接转向对应网址的方法
- FastJson生成和解析JSON数据
- JavaScript设计模式与开发实践
- 02_08 JSP内置对象之Web安全性及config对象
- JSON的三种解析方式
- javascript代码是否有保密性?
- javascript后台运行效率是否比较低?
- js获取图片原始大小
- JavaScript技巧手册
- JavaScript 函数 对象 数组
- JavaScript 函数 对象 数组
- 在项目中使用ExtJS
- JavaScript多线程详解
- 如何在servlet中将数据封装成JSON格式之后传到前台
- extjs type类型
- javascript实现在下拉列表中显示多级树形菜单的方法
- JavaScript快速掌握
- json数据解析