• json学习笔记(二)


    4 JSON 数组

    4.1 数组作为 JSON 对象

    [ "Google", "Runoob", "Taobao" ]

    JSON 数组在中括号中书写。

    JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。

    JavaScript 中,数组值可以是以上的 JSON 数据类型,也可以是 JavaScript 的表达式,包括函数,日期,及 undefined

    4.2 JSON 对象中的数组

    对象属性的值可以是一个数组:

    {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
    }

    使用索引值来访问数组:x = myObj.sites[0];

    4.3 循环数组

    使用 for-in 来访问数组:  

    for (i in myObj.sites) {
        x += myObj.sites[i] + "<br>";
    }

    可以使用 for 循环:

    for (i = 0; i < myObj.sites.length; i++) {
        x += myObj.sites[i] + "<br>";
    }

    4.4 嵌套 JSON 对象中的数组

    JSON 对象中数组可以包含另外一个数组,或者另外一个 JSON 对象: 

    myObj = {
        "name":"网站",
        "num":3,
        "sites": [
            { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
            { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
            { "name":"Taobao", "info":[ "淘宝", "网购" ] }
        ]
    }

     for-in 来循环访问每个数组:

    for (i in myObj.sites) {
        x += "<h1>" + myObj.sites[i].name + "</h1>";
        for (j in myObj.sites[i].info) {
            x += myObj.sites[i].info[j] + "<br>";
        }
    }

    4.5 修改数组值

    使用索引值来修改数组值:myObj.sites[1] = "Github";

    4.6 删除数组元素

    使用 delete 关键字来删除数组元素:delete myObj.sites[1];

    5、JSON.parse()

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

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

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

    5.1 语法

    JSON.parse(text[, reviver])

    参数说明:

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

    5.2 JSON 解析实例

    从服务器接收了以下数据:

    { "name":"runoob", "alexa":10000, "site":"www.hust.edu.cn" }

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

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

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

      实例 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>json解析实例</title>
    </head>
    <body>
    
      <h2>从 JSON 对象中创建 JavaScript 对象</h2>
    
      <p id="demo"></p>
    
      <script>
        var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.hust.edu.cn" }');
        document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;
      </script>
    
    </body>
    </html>

    5.3 从服务端接收 JSON 数据

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title></title>
     6 </head>
     7 <body>
     8 
     9 <h2>使用 XMLHttpRequest 来获取文件内容</h2>
    10 <p>文件内容是标准的 JSON 格式,可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
    11 
    12 <p id="demo"></p>
    13 
    14 <script>
    15 
    16 var xmlhttp = new XMLHttpRequest();
    17 xmlhttp.onreadystatechange = function() {
    18     if (this.readyState == 4 && this.status == 200) {
    19         myObj = JSON.parse(this.responseText);
    20         document.getElementById("demo").innerHTML = myObj.name;
    21     }
    22 };
    23 xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
    24 xmlhttp.send();
    25 
    26 </script>
    27 
    28 <p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>
    29 
    30 </body>
    31 </html>

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title></title>
     6 </head>
     7 <body>
     8 
     9 <h2>内容是数组</h2>
    10 <p>内容是数组会转换为 JavaScript 数组。</p>
    11 
    12 <p id="demo"></p>
    13 
    14 <script>
    15 
    16 var xmlhttp = new XMLHttpRequest();
    17 xmlhttp.onreadystatechange = function() {
    18     if (this.readyState == 4 && this.status == 200) {
    19         myArr = JSON.parse(this.responseText);
    20         document.getElementById("demo").innerHTML = myArr[1];
    21     }
    22 };
    23 xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
    24 xmlhttp.send();
    25 
    26 </script>
    27 
    28 <p>查看服务端数据 <a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
    29 
    30 </body>
    31 </html>

    5.4 异常

      5.4.1解析数据

    JSON 不能存储 Date 对象。

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

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

    var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.hust.edu.cn"}';
    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.hust.edu.cn"}';
    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; 

      5.4.2解析函数

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

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

      不建议在 JSON 中使用函数。

    6 JSON.stringify()  

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

    在向服务器发送数据时一般是字符串。

    我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

    6.1语法:

    JSON.stringify(value[, replacer[, space]])

      参数说明:

      value:   必需, 一个有效的 JSON 字符串。

      replacer:可选。用于转换结果的函数或数组。

    如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。

    如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。

    space:

    可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如: 。

     

    6.2 JavaScript 对象转换

      向服务器发送以下数据:

    var obj = { "name":"runoob", "alexa":10000, "site":"www.hust.edu.cn"};

      使用 JSON.stringify() 方法处理以上数据,将其转换为字符串:

    var myJSON = JSON.stringify(obj);

    6.3 JavaScript 数组转换

      将 JavaScript 数组转换为 JSON 字符串:

    var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
    var myJSON = JSON.stringify(arr);

    6.4 异常  

      6.4.1解析数据 

    JSON 不能存储 Date 对象。

    JSON.stringify() 会将所有日期转换为字符串。

    var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.hust.edu.cn"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON; 

      6.4.2解析函数

      JSON 不允许包含函数,JSON.stringify() 会删除 JavaScript 对象的函数,包括 key 和 value。

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.hust.edu.cn"};
    var myJSON = JSON.stringify(obj);
     
    document.getElementById("demo").innerHTML = myJSON;

      可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生: 

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.hust.edu.cn"};
    obj.alexa = obj.alexa.toString();
    var myJSON = JSON.stringify(obj);
     
    document.getElementById("demo").innerHTML = myJSON;
  • 相关阅读:
    Python中xlrd和xlwt模块读写Excel的方法
    本地安装apk后直接打开,按下Home键再重新打开,然后按下返回键时页面展示错误的处理方法
    Celery在Django中的简单应用
    drf之认证、权限、频率
    drf分页器
    drf之请求、响应、视图
    Django序列化器的简单使用
    Django之URL反向解析
    两大grafana实用插件快速监控kubernetes
    JenkinsPipeline语法概要
  • 原文地址:https://www.cnblogs.com/huststl/p/8276565.html
Copyright © 2020-2023  润新知