收集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模拟select,jselect的方法实现
Nov 08 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
React Hook用法示例详解(6个常见hook)
Apr 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
全文搜索和替换
2006/10/09 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
angular 服务随记小结
2019/05/06 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
python入门教程之识别验证码
2017/03/04 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python高斯消除矩阵
2019/01/02 Python
Python饼状图的绘制实例
2019/01/15 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
工作中的自我评价如何写好
2013/10/28 职场文书
初一体育教学反思
2014/01/29 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
Java 数组的使用
2022/05/11 Java/Android