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利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
微信小程序实现单选功能
Oct 30 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
松下Panasonic RF-B65电路分析
2021/03/02 无线电
咖啡常见的种类
2021/03/03 新手入门
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
python使用mysql数据库示例代码
2017/05/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
软件售后服务承诺书
2014/05/21 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android