javascript解析json格式的数据方法详解


Posted in Javascript onAugust 07, 2020

JSON (JavaScript Object Notation)是一种简单的数据格式,比xml更轻巧。 它是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。那么如何用JavaScript来解析json呢?

首先,科普一下json。在json中,有两种结构:对象和数组。

一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:
var o={“key”:”value”};
数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
var array = [{“name”:”tom”},{“name”:”jake”}];
在数据传输流程中,json是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
json字符串:var str='{“key”:”value”}';
json对象:var o={“key”:”value”};

1. json字符串转化为json对象

可以通过JavaScript的eval()函数来进行解析,代码如下:

<script type="text/javascript">
  var json = '{"key":"value","jian":"zhi"}';
  var obj = eval("(" + json + ")");

  console.log(obj);     //控制台返回 Object
  console.log(obj.key);   //控制台返回 value
  console.log(obj.jian);  //控制台返回 zhi

</script>

或者通过JSON.parse()方法来解析,代码如下:

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

console.log(obj);     //控制台返回 Object
console.log(obj.key);   //控制台返回 value
console.log(obj.jian);  //控制台返回 zhi

既然这两种方法都可以解析json字符串,那么我们究竟使用哪种呢?在这之前,我们先来做一个测试:

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';
var json1 = eval('('+jsonstr+')');
console.log(json1);         //控制台返回 Object
console.log('value: '+ value);    //控制台返回 value 2

我的天,evel方法竟然会执行json字符串里的代码!!

我们再看一下JSON.parse()方法:

var value = 1;
var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';

var json2 = JSON.parse(jsonstr);
console.log(json2);
console.log('value: '+ value);     
 //控制台报错Unexpected token + in JSON at position

现在知道怎么选择了吧。

eval()方法是极其不安全的,尤其是在解析第三方数据的时候,万一第三方数据给你加点恶意代码什么的你不就完了么?所以,JSON.parse()才是正确的选择,当然,有些浏览器不支持这个方法,
可以到https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下载json2.js,添加到你的hlml中就可以了。

除此之外还有一个 jsonStr.parseJSON()的方法,也可以将json字符串转化为json对象,同样需要json2.js包的支持。

2.json对象转化为json字符串

话不多说,先看代码:

var json = '{"key":"value","jian":"zhi"}';
var obj =JSON.parse(json);

var str=JSON.stringify(obj);
console.log(str);    
//控制台返回 {"key":"value","jian":"zhi"}

这里我们用到了和JSON.parse(str) 相对应的方法JSON.stringify(obj)。

同样,还有一个方法叫做obj.toJSONString()也可以将json对象转化为json字符串,与 jsonStr.parseJSON()相对应。

3.json字符数组转化为json数组

这个转化和字符串转对象是一样的,只是操作json数组的方式与操作json对象的方式稍有不同而已。看一段代码:

var arrayStr = '[{"name":"tom","age":"18"},{"name":"jake","age":"20"}]';
var arrayObj =JSON.parse(arrayStr);

console.log(arrayObj);     //控制台返回 Array[2]
console.log(arrayObj[0]);   //控制台返回 Object
console.log(arrayObj[0].name); //控制台返回 tom
console.log(arrayObj[1].age); //控制台返回 20

对于json数组,可以通过下标来进行访问。由于它是一个数组,所以也可以通过for循环进行遍历。

4.jquery解析json字符串

简单地提一下jquery。在使用jquery的ajax功能时,有一个dataType属性,可以将这个属性设置为json或者利用$.getJSON()方法获得服务器返回的值,这个返回值就是一个json对象,所以就不需要再做转化。

当然,jquery也提供了转换的函数 $.parseJSON(string); 这个和之前讲的JSON.parse()得用法是一样的,具体怎么使用,看个人喜好。

到此这篇关于javascript解析json格式的数据方法详解的文章就介绍到这了,更多相关javascript解析json格式的数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
Javascript writable特性介绍
Feb 27 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
angular中的cookie读写方法
Aug 02 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js使用递归解析xml
2014/12/12 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
js实现左右轮播图
2020/01/09 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
如何在django中添加日志功能
2020/02/06 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python 图像增强算法实现详解
2021/01/24 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
自荐书范文
2013/12/08 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
暑期社会实践感言
2014/02/25 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
英语教师求职信范文
2015/03/20 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书