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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
json原理分析及实例介绍
Nov 29 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
浅析node.js中close事件
Nov 26 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
javascript实现连续赋值
Aug 10 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 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 header函数使用教程
2013/09/05 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python 实现图片裁剪小工具
2021/02/02 Python
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
环保口号大全
2014/06/12 职场文书
2014年财务部工作总结
2014/11/11 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python