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 相关文章推荐
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
使用js和canvas实现时钟效果
Sep 08 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
在JavaScript中调用php程序
2009/03/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
PHP7 弃用功能
2021/03/09 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
详解Python 解压缩文件
2019/04/09 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
安全月活动总结
2014/05/05 职场文书
管理建议书范文
2014/05/13 职场文书
项目合作意向书模板
2014/07/29 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2015年档案室工作总结
2015/05/23 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL