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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue实现记事本功能
Jun 26 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php备份数据库类分享
2015/04/14 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python判断Abundant Number的方法
2015/06/15 Python
python虚拟环境迁移方法
2019/01/03 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
如何基于Python按行合并两个txt
2020/11/03 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
文秘人员工作职责
2014/01/31 职场文书
房屋继承公证书
2014/04/10 职场文书
李白故里导游词
2015/02/12 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2015年女工委工作总结
2015/07/27 职场文书
运动会跳远广播稿
2015/08/19 职场文书
趣味运动会口号
2015/12/24 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书