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 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
详解python eval函数的妙用
2017/11/16 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
迟到检讨书900字
2014/01/14 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
党员批评与自我批评
2014/10/15 职场文书
家访教师心得体会
2016/01/23 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
mysql sql常用语句大全
2022/06/21 MySQL