JavaScript对json操作小记
JSON是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,因此我们可以直接处理它不需要依赖任何工具包或者插件。因此,好多后台都会选择返回给前端这种非常友好的数据格式。
引子:
这篇文章是由刚刚开发过程中遇到的一个小问题引发的,先重现一下问题:
var name=$('.wrap').find('.item-name').html();
ssJson[name]=id+'_'+num+'_'+buyUsdt;
// ssJson.name=id+'_'+num+'_'+buyUsdt;
这段代码,要给ssJson这个json对象,以一个变量name为键名添加一个元素进去,使用第三行代码实现不了原本想要达到的效果。因为‘.’这个操作符,在JavaScript中有着特殊意义,用在这里,它就表示对象中键名为“name”的元素,而不是取变量name的值作为键名。之所以会犯这个错误,完全是因为自己对json操作太陌生。因此,决定总结下json操作,不足之处,请多指教!
目前而言,我只知道json对象在JavaScript中有两种操作方式:
Json[prop]=value;
Json.prop=value;
这两个操作方式有什么区别呢?举个例子先:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var jsonObj={
'one':'1',
'two':'2',
'three':'3'
};
var key1='one';
console.log(jsonObj.one);
console.log(jsonObj[key1]);
console.log(jsonObj[one]);
</script>
</body>
</html>
这是输出结果:

由此可见,中括号里面放的应该是变量,而'.'后面,应该直接跟键名。如果键名固定的话,我们使用两种方式都可以操作json,如果键名是变量那么我们就只能乖乖使用中括号形式的方式来操作了。好了,这个小问题就先说到这里。下面来说说其他json操作方法,既然吃一堑,就要长一智。O(∩_∩)O哈哈~
JavaScript中的json形式
JavaScript中的json有两种表现形式,一种是单个的json对象,另一种是json数组,就是多个json对象组成的数组,只要会处理基本的json对象,json数组也能够融会贯通了。
json对象:
var jsonObj={
'one':'1',
'two':'2',
'three':'3'
};
json数组:
var jsonArr = [
{
'one': '1'
},
{
'two': '2'
},
{
'three': '3'
}
];
json的取值
每个json对象都是有键值和键名一一对应的元素组成,无论是键值还是键名都可以操作。
json对象的遍历:
//遍历json对象
for(var key in jsonObj){
console.log(key+':'+jsonObj[key]);
}
json数组的遍历:
//遍历json数组
for(var i in jsonArr){
console.log(jsonArr[i]);
for(var key in jsonObj){
console.log(key+':'+jsonObj[key]);
}
}
结果如下:

json增删改查
查的话无非就是遍历,这里就不在赘述。增加和修改又极为相似,因此这里只说说删除和修改。
删除:
//删除json对象中的元素,初步思路是,找到要删除的元素,然后按照某种规则转化成字符串,删除对应串后再转回去,代码后面再补充
function deleteItem(jsonObj,key) {
for(var key in jsonObj) {
if(jsonObj[key] == key) {
jsonObj[key] = '';
}
}
}
修改:
function updateItem(jsonObj,key,keyVal) {
// jsonObj为要操作的json对象
// key为要操作的元素的键名
// key为要操作的元素的新值
for(var key in jsonObj) {
if(jsonObj[key] == key) {
jsonObj[key] = keyVal;
}
}
}
我理解的json操作,目前大概只有这么多,欢迎大家补充!祝你们周末愉快。(*╹▽╹*)
JavaScript对json操作小记的更多相关文章
- Json数组操作小记 及 JSON对象和字符串之间的相互转换
[{"productid":"1","sortindex":"2"},{"productid":&q ...
- Json操作(DynamicJson)
Json的简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了 ...
- 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
- 【转】python 历险记(四)— python 中常用的 json 操作
[转]python 历险记(四)— python 中常用的 json 操作 目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编 ...
- javaScript系列 [05]-javaScript和JSON
本文输出和JSON有关的以下内容❐ JSON和javaScript❐ JSON的语法介绍❐ JSON的数据类型❐ JSON和XMLHTTPRequest❐ JSON的序列化和反序列化处理 1.1 JS ...
- python 历险记(四)— python 中常用的 json 操作
目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编码和解码? 常用的 json 操作有哪些? json 操作需要什么库? 如何 ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- javascript删除JSON元素
首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的. JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行 ...
- (转载)JavaScript递归查询 json 树 父子节点
在Json中知道某个属性名,想要确定该属性在Json树具体的节点,然后进行操作还是很麻烦的 可以用以下方法找到该属性所在的节点,和父节点 <!DOCTYPE html> <html ...
随机推荐
- Android移动后端服务(BAAS)快速搭建后台服务器之Bmob-android学习之旅(75)
个人移动开发者的最头疼的问题,就是App的网络后台,包含数据库等,国外目前有比较成熟的解决方案,但是限制于墙的问题,推荐国内的解决方案,比较出名的是Bmob和AVOS cloud和Atom等,这一次我 ...
- html案例详解(一)
一.入门. <html> <!-- 头信息的作用 1. 可以设置网页的标题. 2. 可以通知浏览使用指定的码表解释html页面. 3. --> <head> < ...
- 《java入门第一季》集合框架引入与面试题
注:在开始的几篇集合介绍里,不包含泛型的概念.泛型在讲述所有集合后再加入进去. 集合的由来: 我们学习的是面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,我 ...
- Mplayer 的编译
由于项目要用到mplayer,所以要对mplayer进行编译,首先我的平台如下: 系统:windows xp2 安装好mingw+msys,目录为c:/mingw,其中装的gcc是4.3.2版本的. ...
- VC工程的.gitignore模板
VC工程的.gitignore模板 文件内容如下: #====================================== # .gitignore # # 2015-01-09 create ...
- /dev、/sys/dev 和/sys/devices 和udev的关系
/dev,设备文件存储目录,应用程序通过对这些文件的读写和控制,可以访问实际的设备: /sys/devices目录,按照设备挂接的总线类型,组织成层次结构,保存了系统所有的设备:是文件系统管理设备的最 ...
- 【54】Java反射机制剖析
java反射机制: 1.指的是可以于运行时加载,探知和使用编译期间完全未知的类. 2.程序在运行状态中, 可以动态加载一个只有名称的类, 对于任意一个已经加载的类,都能够知道这个类的所有属性和方法; ...
- ubuntu12.04:Mysql数据库:手动安装
首先到mysql的下载中心上下载最新的tar.gz包: 1.在浏览器中输入http://www.mysql.com/downloads/ 进入mysql的下载中心,在这里有使用mysql开发的一些工具 ...
- How to configure ODBC DSN to access local DB2 for Windows
How to configure ODBC DSN to access local DB2 for Windows MA Genfeng (GuangdongUnitoll Services inco ...
- ruby技巧001:求md5散列
ruby核心库中未包含md5之类的功能,不过在其标准库digest中可以方便的使用该功能: = Digest (from ruby core) ---------------------------- ...