JSON.parse()方法转换对象的示例以及注意事项

 更新时间:2023年05月18日 08:57:09   作者:FLy_鹏程万里  
这篇文章主要介绍了JSON.parse()方法转换对象的示例以及注意事项,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象,需要的朋友可以参考下

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明:

  • text:必需, 一个有效的 JSON 字符串。
  • reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

JSON 解析实例

例如我们从服务器接收了以下数据:

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析前要确保你的数据是标准的 JSON 格式,否则会解析出错。

你可以使用我们的在线工具检测:https://c.runoob.com/front-end/53

解析完成后,我们就可以在网页上使用 JSON 数据了:

<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;
</script>

从服务端接收 JSON 数据

我们可以使用 AJAX 从服务器请求 JSON 数据,并解析为 JavaScript 对象。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

从服务端接收数组的 JSON 数据

如果从服务端接收的是数组的 JSON 数据,则 JSON.parse 会将其转换为 JavaScript 数组:

实例:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

异常

解析数据

JSON 不能存储 Date 对象。

如果你需要存储 Date 对象,需要将其转换为字符串。

之后再将字符串转换为 Date 对象。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

我们可以启用 JSON.parse 的第二个参数 reviver,一个转换结果的函数,对象的每个成员调用此函数。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;

解析函数

JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();

不建议在 JSON 中使用函数。

浏览器支持

主流浏览器都支持 JSON.parse() 函数:

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4

到此这篇关于JSON.parse()方法转换对象的示例以及注意事项的文章就介绍到这了,更多相关JSON.parse()的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中JSON.parse(JSON.stringify())实现深拷贝

    JS中JSON.parse(JSON.stringify())实现深拷贝

    深拷贝就是完全拷贝一份新的对象,本文主要介绍了JS中JSON.parse(JSON.stringify())实现深拷贝,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

    JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

    这篇文章主要介绍了JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码,需要的朋友可以参考下
    2017-09-09
  • 教你如何使用PHP输出中文JSON字符串

    教你如何使用PHP输出中文JSON字符串

    PHP 和 JavaScript 交互其实很方便,PHP 原生也提供了对 JSON 格式的支持。主要包括 JSON 编码和解码两个函数:
    2014-05-05
  • json 介绍 js简单实例

    json 介绍 js简单实例

    json全称是JavaScript Object Notation(javaScript对象符号)。JSON是一种结构化的,轻量级的,完全独立于语言的.基于文本的数据传输格式,在许多场合下用来替代xml文件格式。
    2009-12-12
  • 深入javascript json QQ网页登陆

    深入javascript json QQ网页登陆

    下面是个类似QQ网页登陆的一个对话框(DIV), js + json 动态生成.
    2009-07-07
  • 对比分析json及XML

    对比分析json及XML

    本文是根据自己对json、xml的了解,参考了部分资料,结合网上的一些视频教程总结出来的一篇个人对于json和XML的感悟,以及他们之间在使用的时候的优劣,这里推荐给大家。
    2014-11-11
  • 详解JSON1:使用TSQL查询数据和更新JSON数据

    详解JSON1:使用TSQL查询数据和更新JSON数据

    这篇文章主要介绍了使用TSQL查询数据和更新JSON数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • 用JSON做数据传输格式中的一些问题总结

    用JSON做数据传输格式中的一些问题总结

    Json 凭借其自身的优势,在Web数据处理方面已经占据了一定的位置,这段时间涉及到用Json做为数据传输格式的项目有3个,其中有部分页面就采用了Json 数据传输格式, 这里我总结下这段时间采用这种方式的一些问题总结
    2011-12-12
  • Ajax+Json 级联菜单实现代码

    Ajax+Json 级联菜单实现代码

    Ajax+Json 级联菜单实现代码,需要的朋友可以参考下。
    2009-10-10
  • JSON 教程 json入门学习笔记

    JSON 教程 json入门学习笔记

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
    2010-04-04

最新评论