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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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中time(),date(),mktime()区别介绍
2013/09/28 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
javascript中的继承实例代码
2011/04/27 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
浅谈js中的this问题
2017/08/31 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
JS实现简单打字测试
2020/06/24 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
pytorch 预训练层的使用方法
2019/08/20 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
市场营销工作计划书
2014/05/06 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Go 语言中 20 个占位符的整理
2021/10/16 Golang