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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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&amp;&amp;mysql)三
2006/10/09 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js常用排序实现代码
2010/12/28 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python多线程获取返回值代码实例
2020/02/17 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python和Bash结合在一起的方法
2020/11/13 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
教师岗位职责
2013/11/17 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
大学专科求职信
2014/07/02 职场文书
建国大业观后感
2015/06/01 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android