遍历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实现禁止后退的方法
Dec 27 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
Javascript实现简易天数计算器
May 18 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 处理图片的类实现代码
2009/10/23 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
js实现二级导航功能
2017/03/03 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
在python中用url_for构造URL的方法
2019/07/25 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
高级Java程序员面试要点
2013/08/02 面试题
小学教师自我鉴定
2013/11/07 职场文书
求职信写作要突出重点
2014/01/01 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
双方协议书
2014/04/22 职场文书
承诺书模板
2014/08/30 职场文书
检讨书范文2000字
2015/01/28 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers