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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
详解redux异步操作实践
Aug 15 Javascript
js实现下拉框二级联动
Dec 04 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 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连接Oracle数据库
2006/10/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JavaScript类库D
2010/10/24 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
浅谈flask源码之请求过程
2018/07/26 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
一百多行python代码实现抢票助手
2018/09/25 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
pytorch实现查看当前学习率
2020/06/24 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
个人作风建设总结
2014/10/23 职场文书
社区综治工作汇报
2014/10/27 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
毕业实习证明范本
2015/06/16 职场文书
公证书
2019/04/17 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers