遍历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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
javascript几个易错点记录
Nov 26 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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网页后退不再出现过期
2007/03/08 PHP
php分页示例代码
2007/03/19 PHP
css配合jquery美化 select
2013/11/29 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
django form和field具体方法和属性说明
2020/07/09 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
自荐信写法介绍
2014/01/25 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书