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记录用户登录次数实现代码
Jan 15 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
js实现不重复导入的方法
Mar 02 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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中动态HTML的输出技术
2006/10/09 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
Js基础学习资料
2010/11/23 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python中对list去重的多种方法
2014/09/18 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python实现中文输出的两种方法
2015/05/09 Python
numpy.random模块用法总结
2019/05/27 Python
python版DDOS攻击脚本
2019/06/12 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python 操作 MySQL数据库
2020/09/18 Python
什么是岗位职责
2013/11/12 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
公司离职证明标准范本
2014/10/05 职场文书
安全教育培训制度
2015/08/06 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js