使用JSON时，最基本的工作就是JSON数据与JavaScript对象之间的互相转换。如浏览器

从服务器端获得JSON数据，然后转换为JavaScript对象在网页输出。

SON: JavaScript Object Notation，JSON数据格式语法就是JavaScript创建对象的代码语法，所以可以使用JavaScript内建的eval()函数直接将JSON数据转换为JavaScript对象。如下：

1. JSON数据示例

  1. {
  2.     "employees": [{
  3.         "firstName": "John",
  4.         "lastName": "Doe"
  5.     },
  6.     {
  7.         "firstName": "Anna",
  8.         "lastName": "Smith"
  9.     },
  10.     {
  11.         "firstName": "Peter",
  12.         "lastName": "Jones"
  13.     }]
  14. }

2. JSON数据转换为JavaScript对象

  1. var txt = '{ "employees" : [' +
  2. '{ "firstName":"John" , "lastName":"Doe" },' +
  3. '{ "firstName":"Anna" , "lastName":"Smith" },' +
  4. '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
  5.  
  6. var obj = eval ("(" + txt + ")");
  7.  
  8. console.log(obj.employees[1].firstName);

使用eval()函数时，必须为传入的JSON数据参数添加括号'()'，否则会报语法错误。但eval()的问题在于，除了可以解析JSON数据，也可 以用于执行JavaScript脚本片段，这就会带来潜在的安全问题。JSON提供了专门的JSON Parser来实现只用于解析JSON数据，不会执行scripts脚本，而且速度更快。如下：

  1. obj = JSON.parse(txt);

在现在的浏览器中，如IE8, Firefox3.5, Chrome等以上版本，都提供了原生JSON解析器的支持，而且也是ECMAScript (JavaScript)的最新标准。因此，JSON Parser可以在JavaScript代码中是直接调用。

3. JavaScript对象转换为JSON数据

  1. var txt = JSON.stringify(obj);

使用JSON.strigify()函数，将Javascript对象转换为JSON文本数据。

4. JSON数据转换示例 

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>Create Object from JSON String</h2>
  5. <p>
  6. First Name: <span id="fname"></span><br>
  7. Last Name: <span id="lname"></span><br>
  8. </p>
  9. <script>
  10. var txt = '{"employees":[' +
  11. '{"firstName":"John","lastName":"Doe" },' +
  12. '{"firstName":"Anna","lastName":"Smith" },' +
  13. '{"firstName":"Peter","lastName":"Jones" }]}';
  14.  
  15. obj = JSON.parse(txt);
  16.  
  17. document.getElementById("fname").innerHTML=obj.employees[2].firstName
  18. document.getElementById("lname").innerHTML=obj.employees[2].lastName 
  19.  
  20. alert("JSON Data: \n" + JSON.stringify(obj));
  21. </script>
  22. </body>
  23. </html>

JSON数据与JavaScript对象转换的更多相关文章

  1. JSON解析器之jackson json数据和java对象转换

  2. 8.7 JSON存储数据方式(JavaScript对象表示法)

    8.7 JSON存储数据方式(JavaScript对象表示法) JSON JavaScript 对象表示法(JavaScript Object Notation) 是一种存储数据的方式. 一.创建JS ...

  3. JSON字符串和Javascript对象字面量

    JSON字符串和Javascript对象字面量 JSON是基于Javascript语法的一个子集而创建的,特别是对象和数组字面量语法. 正是由于JSON的这种特殊来历,导致很多Javascript程序 ...

  4. 移动端基于HTML模板和JSON数据的JavaScript交互

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 +  连接符连接多个html内容: var html = ''; htm ...

  5. C#如何解析JSON数据（反序列化对象）

    第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象) 第四章:C#如何生成JSON字符串提交给接口 ...

  6. JSON数据与Java对象的相互转换

    JSON数据与Java对象的相互转换 JSON解析器 常见的解析器:Jsonlib .Gson. fastjson. jackson JSON转化为Java对象 使用步骤: 1.导入jackson的相 ...

  7. 用JAVA进行Json数据解析（对象数组的相互嵌套）

    这段时间我们在做一个英语翻译软件的小小小APP,涉及到了对Json数据的解析,所以特地来总结一下! 假设我们要对如下数据进行解析,其实在平时,返回的Json数据是很乱的,很难分清数据的关系,这是经过相 ...

  8. 使用Gson转换json数据为Java对象的一个例子

    记录工作中碰到的一个内容. 原料是微信平台的一个接口json数据. { "errcode" : 0, "errmsg" : "ok", &q ...

  9. java json数据转List对象的集合-----阿里巴巴插件---及原生json---JSON 与 对象 、集合 之间的转换 JSON字符串和java对象的互转【json-lib】

    List<RunfastFullLess> list=(List<RunfastFullLess>)JSONArray.parseObject(activity.getFull ...

随机推荐

  1. Magento模型和ORM基础

    对于任何一个MVC架构,模型(Model)层的实现都是占据了很大一部分.对于Magento来说,模型占据了一个更加重要的位置,因为它常常包含了一部分商业逻辑代码(可以说它对,也可以说它错).这些代码在 ...

  2. 4柱汉诺塔（zz）

    多柱汉诺塔可以用Frame–Stewart算法来解决. The Frame–Stewart algorithm, giving a presumably optimal solution for fo ...

  3. Quartz Cron表达式生成器

    格式: [秒] [分] [小时] [日] [月] [周] [年]  序号 说明   是否必填  允许填写的值 允许的通配符   1  秒  是  0-59    , - * /  2  分  是  0 ...

  4. kafka环境搭建2-broker集群+zookeeper集群(转)

    原文地址:http://www.jianshu.com/p/dc4770fc34b6 zookeeper集群搭建 kafka是通过zookeeper来管理集群.kafka软件包内虽然包括了一个简版的z ...

  5. OS X EL Capitan安装Cocoapods 报错ERROR

    升级OS X EL Capitan10.11之后,原来的pod不能用了,重新安装cocoapods,发现 在运行 “sudo gem install cocoapods” 的时候出现问题: ERROR ...

  6. ReactiveCocoa 谈谈RACMulticastConnection

    本文出处:http://www.cnblogs.com/forkasi/p/4886740.html 在项目里,经常会使用这种方式创建一个signal 然后next RACSignal *four = ...

  7. iOS支付宝集成步骤；王刚韧的技术博客

  8. 如何在Angular2中使用Forms

    在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...

  9. Dell Remote Access Controller 添加和配置 DRAC/MC 用户

    iDRAC设置 单击“Configuration”(配置)选项卡并选择“Users”(用户). 单击“Username”(用户名)列下的 [Available](可用)添加新用户,或单击“Userna ...

  10. bzoj1008： [HNOI2008]越狱

    思路:首先所有情况就是m^n,然后不可能发生越狱的情况就是第一个有m种选择,第二个要与第一个不同就是m-1种选择,第三个要与第二个不同也是m-1种选择,然后不可能发生越狱的情况数就是m*(m-1)^( ...