遍历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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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调用Webservice实例代码
2011/07/29 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
Vue 中的compile操作方法
2018/02/26 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python模块文件结构代码详解
2018/02/03 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
struct与class的区别
2014/02/03 面试题
中职生自我鉴定范文
2013/10/03 职场文书
前台文员岗位职责及工作流程
2013/11/19 职场文书
自荐信格式简述
2014/01/25 职场文书
协议书范文
2015/01/27 职场文书
单位证明范文
2015/06/18 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers