JS中JSON对象和String之间的互转及处理技巧


Posted in Javascript onApril 06, 2016

JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已。

如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/

1.在javascript中新建一个字符串(JSON文本)。

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

注意:eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

字符串转json对象:JSON.parse(jsonstr);

json对象转json字符串:JSON.stringify(jsonObj);

JQuery方法:

json字符串转json对象:jQuery.parseJSON(jsonStr);

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

2.那么如何遍历json数组呢?可以把它当成一个普通的javascript对象来处理。

<html>
<body>
<h2>如何遍历JSON数组</h3>
<div id="result"></div>
<script type="text/javascript">
var txt = '[{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]';
var arrayJson = JSON.parse(txt);
var html='';
for(var p in arrayJson){
html+=' firstName:'+arrayJson[p].firstName;
html+=' lastName'+arrayJson[p].lastName;
html+='<br />';
}
document.getElementById("result").innerHTML= html;
</script>
</body>
</html>

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/js.html提 供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在 https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象,

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

以上内容是针对JS中JSON对象和String之间的互转及处理技巧,希望对大家有所帮助。接下来给大家补充点知识JavaScript中String和JSON之间的转换。

下面给大家介绍w3c标准的浏览器(如火狐、chrome等)是有一个对象JSON(注意是大写)专门用来处理json的。这个对象有两个函数:

JSON.parse(text) //用于解析json;

JSON.stringify(object) //用于生成json格式;

早期的IE版本没有这个对象,可以去json的官方网站自行下载json2.js对付早期IE版本http://www.JSON.org

下面是之前的一些方法,现在可以弃用了

1.旧方法

function strToJson(str){ 
var json = eval('(' + str + ')'); 
return json; 
}

2.常用

function strToJson(str){ 
return (new Function("return " + str))(); 
}

3.IE不支持的方法

function strToJson(str){ 
return JSON.parse(str); 
}

4.jQuery方法

parseJSON: function( data ) { 
if ( typeof data !== "string" || !data ) { 
return null; 
} 
data = jQuery.trim( data ); 
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@") 
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]") 
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) { 
return window.JSON && window.JSON.parse ? 
window.JSON.parse( data ) : 
(new Function("return " + data))(); 
} else { 
jQuery.error( "Invalid JSON: " + data ); 
} 
},
Javascript 相关文章推荐
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Vue父子组件之间的通信实例详解
Sep 28 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 #Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 #Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
php 问卷调查结果统计
2015/10/08 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
详解Django 时间与时区设置问题
2019/07/23 Python
解决django FileFIELD的编码问题
2020/03/30 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
Linux的文件类型
2012/03/07 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
高一物理教学反思
2014/01/24 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技