遍历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里的条件判断
Feb 27 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
jquery与js实现全选功能的区别
2017/06/11 jQuery
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
群众路线组织生活会发言材料
2014/10/17 职场文书
维稳工作情况汇报
2014/10/27 职场文书
期中考试复习计划
2015/01/19 职场文书
离婚上诉状范文
2015/05/23 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle