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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS原型链怎么理解
Jun 27 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
模仿OSO的论坛(二)
2006/10/09 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
董事长秘书职责
2014/01/31 职场文书
保险公司演讲稿
2014/09/02 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
python数字类型和占位符详情
2022/03/13 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby