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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
js获取内联样式的方法
Jan 27 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
vue项目刷新当前页面的三种方法
Dec 04 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页面间传递参数实例代码
2008/06/05 PHP
php强制下载类型的实现代码
2011/04/21 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
浅析Jquery操作select
2016/12/13 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
深入浅析Python字符编码
2015/11/12 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
小城镇建设汇报材料
2014/08/16 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
酒店员工手册范本
2015/05/14 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
python关于集合的知识案例详解
2021/05/30 Python