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 相关文章推荐
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
JavaScript如何判断对象有某属性
Jul 03 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
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
停电调休通知
2015/04/16 职场文书
2015年保管员工作总结
2015/04/30 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
防卫过当辩护词
2015/05/21 职场文书
详解Redis主从复制实践
2021/05/19 Redis
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js