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实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
TS 类型收窄教程示例详解
Sep 23 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python的subprocess模块总结
2014/11/07 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python如何定义接口和抽象类
2020/07/28 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
施工人员岗位职责
2013/12/12 职场文书
大学军训感言400字
2014/03/11 职场文书
聚美优品广告词改编
2014/03/14 职场文书
家长学校工作方案
2014/05/07 职场文书
男性健康日的活动方案
2014/08/18 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
民间借贷协议书范本
2014/10/01 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
详解Python中的进程和线程
2021/06/23 Python
bat批处理之字符串操作的实现
2022/03/16 Python