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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
微信小程序canvas实现签名功能
Jan 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php实现的mongodb操作类
2015/05/28 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python中property函数用法实例分析
2018/06/04 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python小项目之五子棋游戏
2019/12/26 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
.net软件工程师面试题
2015/03/31 面试题
护理专业大学生自我推荐信
2014/01/25 职场文书
2014全国两会心得体会
2014/03/17 职场文书
护理医院见习报告
2014/11/03 职场文书
安全承诺书格式范本
2015/04/28 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript