遍历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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
微信小程序使用Socket的实例
Sep 19 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 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
实用函数8
2007/11/08 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python机器学习之KNN分类算法
2018/08/29 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
一文搞懂Redis中String数据类型
2022/04/03 Redis
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers