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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
JS array数组检测方式解析
May 19 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php adodb连接不同数据库
2009/03/19 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
高二英语教学反思
2014/01/19 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
绿色校园广播稿
2014/10/13 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
python 判断文件或文件夹是否存在
2022/03/18 Python