收集json解析的四种方法分享


Posted in Javascript onJanuary 17, 2014

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"}
    ]
};
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的值。

Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
Vue slot用法(小结)
Oct 22 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 #Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 #Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 #Javascript
Jquery 获取对象的几种方式介绍
Jan 17 #Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 #Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 #Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
Javascript变量函数浅析
2011/09/02 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue数据初始化initState的实例详解
2019/04/11 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
Python中的推导式使用详解
2015/06/03 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Python图像读写方法对比
2020/11/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
劳动竞赛活动方案
2014/02/20 职场文书
党支部先进事迹材料
2014/12/24 职场文书
起诉意见书范文
2015/05/19 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL