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 相关文章推荐
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
Oracle 常见问题解答
2006/10/09 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python Socket编程详细介绍
2017/03/23 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python处理CSV与List的转换方法
2018/04/19 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
经营场所使用证明
2015/06/19 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏