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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 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 OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
javascript 实现map集合
2015/04/03 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Python中的探索性数据分析(功能式)
2017/12/22 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python sorted函数原理解析及练习
2020/02/10 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
英国健身专家:WIT Fitness
2021/02/09 全球购物
医药专业推荐信
2013/11/15 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
图书馆标语
2014/06/19 职场文书
上课不认真检讨书
2014/09/17 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
python内置进制转换函数的操作
2021/06/02 Python