遍历json获得数据的几种方法小结


Posted in Javascript onJanuary 21, 2017

Json在Web开发的用处非常广泛,作为数据传递的载体,如何解析Json返回的数据是非常常用的。下面介绍下四种解析Json的方式:

Part 1

var list1 = [1,3,4]; 
alert(list1[1]); 
var list2 = [{"name":"leamiko","xing":"lin"}]; 
alert(list2[0]["xing"]) 
alert(list2[0].xing)

Part 2

var value = { 
  "china":{ 
    "hangzhou":{"item":"1"}, 
    "shanghai":{"item":"2"}, 
    "chengdu":{"item":"3"} 
  }, 
  "America":{ 
    "aa":{"item":"1"}, 
    "bb":{"item":"2"}  
  }, 
  "Spain":{ 
    "dd":{"item":"1"}, 
    "ee":{"item":"2"}, 
    "ff":{"item":"3"}  
  } 
}; 
  
for(var countryObj in value) 
{ 
  document.write(countryObj + ":<br />") 
  //没用的for(var cityObj in value.countryObj) 
  for(var cityObj in value[countryObj]) 
  { 
    document.write('  ' + cityObj + "<br />"); 
    for(var itemObj in value[countryObj][cityObj]) 
    { 
      document.write("   "+ itemObj + value[countryObj][cityObj][itemObj] +"<br />")  
    } 
  }  
}

解释:

countryObj 为value对象的一个属性明,value[countryObj] 为value对象的属性值 这里为一个json对象比如b,value[countryObj][cityObj]为josn对象b的属性值 它也是一个json对象,于是 value[countryObj][cityObj]["item"]便可以取到json对象暂时成为c的值,或者 value[countryObj][cityObj].item。

总之分清是json还是array这是很关键的。

Part 3

var value2 = { 
  "china":[ 
    {"name":"hangzhou", "item":"1"}, 
    {"name":"shanghai", "item":"2"}, 
    {"name":"sichuan", "item":"3"} 
  ], 
  "America":[ 
    {"name":"aa", "item":"12"}, 
    {"name":"bb", "item":"2"} 
  ], 
  "Spain":[ 
    {"name":"cc", "item":"1"}, 
    {"name":"dd", "item":"23"}, 
    {"name":"ee", "item":"3"} 
  ] 
};<BR>  
for (var countryObj in value2) 
{ 
  document.write(countryObj + ":<br />")  
  for (var cityObj in value2[countryObj]) 
  { 
    //可以用document.write(" " + value2[countryObj][cityObj].item + "<br />"); 
    document.write(cityObj + " " + value2[countryObj][cityObj]["name"] + "<br />" );  
  } 
}

解释:

countryObj 为value2对象的属性名,value2[countryObj] 为value2对象属性值 在本例中它是一个数组,cityObj 是数组的一个元素,它又是另外一个json对象,于是,value2[countryObj][cityObj]["name"]就访问到该对象的 name的属性值,也可以通过 value2[countryObj][cityObj].name 来访问该属性值。

Part 4

var value2 = { 
  "china":[ 
    {"name":"hangzhou", "item":"1"}, 
    {"name":"shanghai", "item":"2"}, 
    {"name":"sichuan", "item":"3"} 
  ], 
 
  "America":[ 
    {"name":"aa", "item":"12"}, 
    {"name":"bb", "item":"2"} 
  ], 
  "Spain":[ 
    {"name":"cc", "item":"1"}, 
    {"name":"dd", "item":"23"}, 
    {"name":"ee", "item":"3"} 
  ] 
}; 
   
  for (var countryObj in value2) 
  { 
    document.write(countryObj + ":<br />")  
    //document.write(" " + value2[countryObj].length); 
    for (var i = 0;i < value2[countryObj].length; i++) 
    { 
      document.write(" " + value2[countryObj][i]["name"] + "<br />");  
    } 
  }

解释:

countryObj value2对象的属性名,value2[countryObj] 属性值 本例中是一个数组,value2[countryObj].length 数组的长度,value2[countryObj][i]数组的项 == json对象。

value2[countryObj][i]["name"] 取得name的值,也可以用value2[countryObj][i].name 来取得name的值。

当一个人找不到出路的时候,最好的办法就是将当前能做好的事情做到极致,做到无人能及。

以上这篇遍历json获得数据的几种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
Javascript事件实例详解
Nov 06 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
js调用刷新界面的几种方式
May 03 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 #Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
You might like
php 生成短网址原理及代码
2014/01/23 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
js获取Get值的方法
2016/09/29 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python numpy数组转置与轴变换
2019/11/15 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
市场部规章制度
2014/01/24 职场文书
工作推荐信范文
2014/05/10 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js