JSON遍历方式实例总结


Posted in Javascript onDecember 07, 2015

本文实例总结了JSON遍历方式。分享给大家供大家参考,具体如下:

第一种:使用for循环

js代码:

function CyclingJson1() { 
 var testJson = '[{ "name": "小强", "age": 16 },{"name":"小明","age":17}]'; 
 testJson = eval("(" + testJson + ")"); 
 for (var i = 0; i < testJson.length; i++) { 
  alert(testJson[i].name); 
 } 
}

第二种:使用关键字in

js代码:

function CyclingJson2() {
 var testJson = '[{ "name": "小强", "age": 16 },{"name":"小明","age":17}]'; 
 testJson = eval("(" + testJson + ")");
 for (var i in testJson) {
  alert(testJson[i].name);
 }
}

第三种;使用jquery.each()函数

function CyclingJson3() {
 var testJson = '[{ "name": "小强", "age": 16 },{"name":"小明","age":17}]';
 testJson = eval("(" + testJson + ")");
 $.each(testJson, function (i, n) {
  alert(i); //i为索引值
  alert(n.name); //n为遍历的值
 });
}

综合实例:

<script language="javascript" type="text/javascript">
var array = { "a": "abc", "b": [1, 2, 3, 4, 5, 6], "c": 3, "d": { "name": "james", "age": 28},"e":null,"f":true };
var arrayObj = { "a": { "name": "kobe", "age": 34 }, "b": { "name": "lofo", "age": 28} };
//遍历array方式1
for (var x in array) {
 if (typeof array[x] == 'object' && array[x] != null ) {
  for (var y in array[x]) {
   alert("key = " + y + " value = " + array[x][y]);
  }
 } else {
  alert("key = " + x + " value = " + array[x]); // 非array object
 }
}
//遍历array方式2
$.each(array, function(k, v) {
 var a = typeof (v);
 //数组与对象为object类型,其他分别是string与number类型
 //此时的k代表a、b、c、d,v代表对应的值
 if (typeof (v) == "object") {
  //获取数组与对象后,再去遍历这个数组与对象
  $.each(v, function(k1, v1) {
   window.alert("key = " + k1 + " value=" + v1);
  });
 } else {
  window.alert("key = " + k + " value=" + v);
 }
});
//遍历arrayObj方式1
for (var x in arrayObj) {
 for (var key in arrayObj[x]) {
  window.alert("key=" + key + " value=" + arrayObj[x][key]);
 }
}
//遍历arrayObj方式2
$.each(arrayObj, function(key, value) {
 $.each(value, function(k, v) {
  window.alert("key=" + k + " value=" + v);
 });
});
//遍历arrayObj方式3
$.each(arrayObj, function(key, value) {
 window.alert("key=" + key + " valueName=" + value.name + " valueAge=" + value.age);
});
</script>
<script language="javascript" type="text/javascript">
var UserList = [
 { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" },
 { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" },
 { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }
]
$.each(UserList, function(k, v) {
 $.each(v, function(k1, v1) {
  if (typeof (v1) == "object") {
   $.each(v1, function(k2, v2) {
    window.alert("key=" + k2 + " value=" + v2);
   });
  } else {
   window.alert("key=" + k1 + " value=" + v1);
  }
 });
});
</script>
<script language="javascript" type="text/javascript">
var userArray = [
 { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" },
 { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" },
 { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }
];
for (var i in userArray) {
 for (var k in userArray[i]) {
  if (typeof userArray[i][k] == "object" && userArray[i][k] != null) {
   for (var j in userArray[i][k]) {
    window.alert("key=" + j + "--value=" + userArray[i][k][j]);
   }
  } else {
   window.alert("key=" + k + "--value=" + userArray[i][k]);
  }
 }
}
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
JS实现日期时间动态显示的方法
Dec 07 #Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 #Javascript
js实现遍历含有input的table实例
Dec 07 #Javascript
JavaScript中的return语句简单介绍
Dec 07 #Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 #Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 #Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP mkdir()定义和用法
2009/01/14 PHP
PHP中session变量的销毁
2014/02/27 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
供应链金融服务方案
2014/05/25 职场文书
小学课外阅读总结
2014/07/09 职场文书
家长高考寄语
2015/02/27 职场文书
签订劳动合同通知书
2015/04/16 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
css3新特性的应用示例分析
2022/03/16 HTML / CSS
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript