遍历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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular2安装angular-cli
May 21 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
VSCode launch.json配置详细教程
Jun 18 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操作xml
2013/10/27 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Vue仿今日头条实例详解
2018/02/06 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
wxPython中listbox用法实例详解
2015/06/01 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python中的__slots__示例详解
2017/07/06 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
介绍一下write命令
2012/09/24 面试题
学校爱心捐款倡议书
2014/05/13 职场文书
小学教师师德整改措施
2014/09/29 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python