收集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 相关文章推荐
javascript间隔刷新的简单实例
Nov 14 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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缓存技术介绍
2006/11/25 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
详解react-redux插件入门
2018/04/19 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python 容器总结整理
2017/04/04 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
四风存在的原因分析
2014/02/11 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
工作作风建设心得体会
2014/10/22 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript