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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
详解uniapp的全局变量实现方式
Jan 11 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查看session内容的函数
2008/08/27 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
pandas中去除指定字符的实例
2018/05/18 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
django如何自己创建一个中间件
2019/07/24 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
Python脚本调试工具安装过程
2021/01/11 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
产品委托授权书范本
2014/09/16 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
小学新教师个人总结
2015/02/05 职场文书
2015年领班工作总结
2015/04/29 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
Python安装使用Scrapy框架
2022/04/12 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python