遍历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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
Vue退出登录时清空缓存的实现
Nov 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
Yii清理缓存的方法
2016/01/06 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vant实现购物车功能
2020/06/29 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
深入浅析Python传值与传址
2018/07/10 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python 在函数上添加包装器
2020/07/28 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
运动会800米加油稿
2014/02/22 职场文书
个人培训自我鉴定
2014/03/28 职场文书
奉献演讲稿范文
2014/05/21 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2014年党建工作总结
2014/11/11 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技