js 解析 JSON 数据简单示例


Posted in Javascript onApril 21, 2020

本文实例讲述了js 解析 JSON 数据。分享给大家供大家参考,具体如下:

JSON 数据如下:

{
  "name": "mkyong",
  "age": 30,
  "address": {
    "streetAddress": "88 8nd Street",
    "city": "New York"
  },
  "phoneNumber": [
    {
      "type": "home",
      "number": "111 111-1111"
    },
    {
      "type": "fax",
      "number": "222 222-2222"
    }
  ]
}

要在JavaScript中访问JSON对象,使用 JSON.parse() 解析它,并通过“.”或“[]”访问。

JS 代码如下:

<script>
    var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';

  var json = JSON.parse(data);
      
  console.log(json["name"]); //mkyong
  console.log(json.name); //mkyong
  
  console.log(json.address.streetAddress); //88 8nd Street
  console.log(json["address"].city); //New York
      
  console.log(json.phoneNumber[0].number); //111 111-1111
  console.log(json.phoneNumber[1].type); //fax
      
  console.log(json.phoneNumber.number); //undefined
</script>

运行结果:

js 解析 JSON 数据简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
You might like
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
如何验证python安装成功
2020/07/06 Python
python绘制趋势图的示例
2020/09/17 Python
师范学院教师自荐书
2014/01/31 职场文书
捐资助学倡议书
2014/04/15 职场文书
协议书格式
2014/04/23 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
见习报告的格式
2014/11/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
自我推荐信怎么写
2015/03/24 职场文书