js 解析 JSON 数据简单示例

本文实例讲述了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>

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符

  • js解析与序列化json数据(二)序列化探讨

    上一节我们讲解了JSON.stringify()的基本用法,这一节我们来重点探讨一下序列化. JSON.stringify()除了要序列化的js对象外,还可以接收另外两个参数,这两个参数用于指定不同方式序列化js对象.第一个参数是过滤器,可以使一个数组,也可以是一个函数:第二个参数是一个选项,表示是否在JSON字符串中保留缩进.单独或组合使用这两个参数,可以更全面深入地控制JSON的序列化. 1.过滤结果 如果过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性

  • 解析javascript 数组以及json元素的添加删除

    javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

  • jquery JSON的解析方式

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu

  • JS解析json数据并将json字符串转化为数组的实现方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'ric

  • JS中Json数据的处理和解析JSON数据的方法详解

    JS中Json数据的处理和解析JSON数据的方法详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

  • JavaScript中解析JSON数据的三种方法

    概述 现在JSON格式在web开发中越来越受重视,特别是在使用ajax开发项目的过程中,经常需要将json格式的字符串返回到前端,前端解析成JS对象(JSON ). ECMA-262(E3)中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 解析JSON数据的三种方法 eval()方法 解析JSON数据的最常用方法是使用javascript的eval()方法,代码如下: 复制代码 代码如下: func

  • js解析json读取List中的实体对象示例

    1.由后台action 传给前台是需要将map 转成json格式 复制代码 代码如下: Map<String, List> resultMap: JSONObject json = JSONObject.fromObject(resultMap); message = json.toString(); List中存放多个student对象 2.前台js 中先将结果json串转成对象 复制代码 代码如下: var obj = eval("("+data+")&quo

  • 解析JSON对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递. 例如:前台按类的格式传递JSON对象: var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\&qu

  • js 解析 JSON 数据简单示例

    本文实例讲述了js 解析 JSON 数据.分享给大家供大家参考,具体如下: JSON 数据如下: { "name": "mkyong", "age": 30, "address": { "streetAddress": "88 8nd Street", "city": "New York" }, "phoneNumber": [

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • javascript生成json数据简单示例分享

    复制代码 代码如下: //定义对象var finalInfo = new Object(); //为对象赋值finalInfo.purchaseInfoId = '';finalInfo.purchaseMethodType = '';finalInfo.contact = '';finalInfo.contactTel = '';finalInfo.bidInfoStr = '';//将对象转换为json格式var finalInfoStr = JSON.stringify(finalInfo

  • 利用Golang解析json数据的方法示例

    本文主要给大家介绍的是关于Golang解析json数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 使用 Golang 解析 json 数据,这种 json 格式是对象的数组,官方文档有一个示例: var jsonBlob = []byte(`[ {"Name": "Platypus", "Order": "Monotremata"}, {"Name": "Quoll

  • jquery解析JSON数据示例代码

    这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 代码如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value

  • JavaScript解析JSON数据示例

    JavaScript解析JSON数据示例

    本文实例讲述了JavaScript解析JSON数据.分享给大家供大家参考,具体如下: JSON数据是一种常用的数据格式,解析方式也比较简单,特别是由于JavaScript原生就支持JSON,所以JavaScript能够更好的解析JSON. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • Android之解析JSON数据示例（android原生态，FastJson，Gson）

    Android之解析JSON数据示例（android原生态，FastJson，Gson）

    1.json网页代码 <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%><%@page isELIgnored="false" %>${fqs } 2.json数据网页效果图 3.Android代码 布局 <?xml version="1.0" encod

随机推荐