遍历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入门教程 Cookies
Jan 31 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
js尾调用优化的实现
May 23 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
substr()函数中文版
2006/10/09 PHP
类的另类用法--数据的封装
2006/10/09 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP设置进度条的方法
2015/07/08 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
JQuery小知识
2010/10/15 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python处理二进制数据的方法
2015/06/03 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
蓝颜请假条
2014/04/11 职场文书
协议书样本
2014/04/23 职场文书
车间安全生产标语
2014/06/06 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python