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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
办理护照介绍信
2014/01/16 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
公积金贷款承诺书
2015/04/30 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
详解Redis基本命令与使用场景
2021/06/01 Redis
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript