遍历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 相关文章推荐
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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+MySql编写聊天室
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
angular.bind使用心得
2015/10/26 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
学雷锋先进个人事迹
2014/05/26 职场文书
欢迎词怎么写
2015/01/23 职场文书
荆州古城导游词
2015/02/06 职场文书
工作保证书怎么写
2015/02/28 职场文书