遍历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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
如何正确理解vue中的key详解
Nov 02 Javascript
Javascript原生ajax请求代码实例
Feb 20 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
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python logging设置和logger解析
2019/08/28 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python中time tzset()函数实例用法
2021/02/18 Python
mysql有关权限的表都有哪几个
2015/04/22 面试题
信息学院毕业生自荐信范文
2014/03/04 职场文书
产品质量承诺范本
2014/03/31 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
培训师岗位职责
2015/02/14 职场文书
中标通知书范本
2015/04/17 职场文书
李强为自己工作观后感
2015/06/11 职场文书
大学新生入学感想
2015/08/07 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis