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 操作文件 实现方法小结
Jul 02 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
javascript中Function类型详解
Apr 28 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
vue实现匀速轮播效果
Jun 29 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python中的Numpy入门教程
2014/04/26 Python
python解析xml文件操作实例
2014/10/05 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Android分包MultiDex策略详解
2017/10/30 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python实现图像拼接功能
2020/03/23 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
农药学硕士毕业生自荐信
2013/09/25 职场文书
毕业自荐书
2013/12/09 职场文书
贷款担保书范文
2014/05/13 职场文书
银行求职信范文
2014/05/26 职场文书
公司委托书格式
2014/08/01 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
出差报告怎么写
2014/11/06 职场文书
绵山导游词
2015/02/05 职场文书
硕士学位申请报告
2015/05/15 职场文书
人民检察院起诉书
2015/05/20 职场文书
歌咏比赛主持词
2015/06/29 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Python实现列表拼接和去重的三种方式
2021/07/02 Python