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 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
js简单实现自动生成表格功能示例
Jun 02 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基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
JS判断时间段的实现代码
2017/06/14 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python实现二分法算法实例
2015/02/02 Python
python3设计模式之简单工厂模式
2017/10/17 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
大型晚会策划方案
2014/02/06 职场文书
五年级数学教学反思
2014/02/11 职场文书
竞选班委演讲稿
2014/04/28 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
大学体育课感想
2015/08/10 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
python实现A*寻路算法
2021/06/13 Python
Consul在linux环境的集群部署
2022/04/08 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers