收集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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
JQuery UI皮肤定制
Jul 27 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 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/08/20 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
对python多线程与global变量详解
2018/11/09 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
keras打印loss对权重的导数方式
2020/06/10 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js