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 no-repeat写法 背景不重复
Mar 18 Javascript
js自定义事件代码说明
Jan 31 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
js转换对象为xml
Feb 17 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JS改变页面颜色源码分享
Feb 24 Javascript
深入详解JS函数的柯里化
Jun 09 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
杏林同学录(四)
2006/10/09 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
无故旷工检讨书
2014/01/26 职场文书
经济管理专业求职信
2014/06/09 职场文书
幸福家庭标语
2014/06/27 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS