遍历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实现分割提取页面所需内容
May 09 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JavaScript验证知识整理
Mar 24 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
详解JavaScript执行模型
Nov 16 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
新闻上下滚动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中替换换行符的几种方法小结
2012/10/15 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
修改发贴的编辑功能
2007/03/07 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
vue-swiper的使用教程
2018/08/30 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python 元类实例解析
2018/04/04 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python 实现线程之间的通信示例
2020/02/14 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
英语读书笔记
2015/07/02 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2016年情人节广告语
2016/01/28 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL