zoukankan      html  css  js  c++  java
  • js操作json

    一、什么是json?

    json英文全称 JavaScript Object Notation,是一种易于理解的轻量级数据交换格式。

    JSON 作用:用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

    二、语法规则

    • 数据为 键/值 对。
    • 数据由逗号分隔。
    • 大括号保存对象
    • 方括号保存数组

      json对象的代码示例:

      {"firstName":"John", "lastName":"Doe"}

      json数组的代码示例:

      "employees":[
        {"firstName":"John", "lastName":"Doe"}, 
        {"firstName":"Anna", "lastName":"Smith"}, 
        {"firstName":"Peter", "lastName":"Jones"}
      ]

    三、json的操作

      JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

      相关代码示例:

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title>菜鸟教程(runoob.com)</title>
        </head>
        <body>
          <h2>从 JSON 字符串中创建对象</h2>
          <p>
            名: <span id="fname"></span><br>
            姓: <span id="lname"></span><br>
          </p>
          <script>
            var txt = '{"employees":[' +
            '{"firstName":"John","lastName":"Doe" },' +
            '{"firstName":"Anna","lastName":"Smith" },' +
            '{"firstName":"Peter","lastName":"Jones" }]}';

            var obj = eval ("(" + txt + ")");

            document.getElementById("fname").innerHTML=obj.employees[1].firstName
            document.getElementById("lname").innerHTML=obj.employees[1].lastName
          </script>
         </body>
        </html>

        JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

        语法:JSON.parse(text[, reviver])

        参数:

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

        相关示例:

        <!DOCTYPE html>

        <html>

          <head>

            <meta charset="utf-8">
            <title>菜鸟教程(runoob.com)</title>
          </head>
        <body>

          <h2>从 JSON 字符串中创建一个对象</h2>
          <p id="demo"></p>
        <script>
          var text = '{"employees":[' +
          '{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
          '{"name":"Google","site":"http://www.Google.com" },' +
          '{"name":"Taobao","site":"http://www.taobao.com" }]}';
          obj = JSON.parse(text);
          document.getElementById("demo").innerHTML =
          obj.employees[1].name + " " + obj.employees[1].site;
        </script>

       </body>
      </html>

      选参:

        <!DOCTYPE html>

        <html>
        <head>
          <meta charset="utf-8">
          <title>菜鸟教程(runoob.com)</title>
        </head>
        <body>

          <h2>使用可选参数,回调函数</h2>
          <p id="demo"></p>
          <script>
            JSON.parse('{"p": 5}', function(k, v) {
            if (k === '') { return v; }
            return v * 2;
            });
            JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
            document.write( k );// 输出当前属性,最后一个为 ""
            document.write("<br>");
            return v; // 返回修改的值
            });
          </script>

        </body>
       </html>

       JSON.stringify方法用于将一个值转为字符串。该字符串应该符合JSON格式,并且可以被JSON.parse方法还原。

       语法:JSON.stringify(value[, replacer[, space]]) 

        参数说明:

      • value:

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

      • replacer:

        可选。用于需要转成字符串的属性。。

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

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

      • space:

        可选,文本添加缩进、空格和换行符,用于增加返回的JSON字符串的可读性。如果是数字,表示每个属性前面添加的空格(最多不超过10个);如果是字符串(不超过10个字符),则该字符串会添加在每行前面。

       相关代码示例:

        <!DOCTYPE html>

        <html>
          <head>
            <meta charset="utf-8">
            <title>菜鸟教程(runoob.com)</title>
          </head>
          <body>

            <p id="demo"></p>
            <script>
              var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
              str_pretty1 = JSON.stringify(str)
              document.write( "只有一个参数情况:" );
              document.write( "<br>" );
              document.write("<pre>" + str_pretty1 + "</pre>" );
              document.write( "<br>" );
              str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
              document.write( "使用参数情况:" );
              document.write( "<br>" );
              document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
            </script>

          </body>
        </html>

        由 JSON.stringify 方法用于允许转换某个对象的数据以进行 JavaScript Object Notation (JSON) 序列化。

        语法:objectname.toJSON()

        参数:objectname必需。  需要进行 JSON 序列化的对象。  

        代码示例:

        使用 toJSON 方法将大写的字符串成员值序列化。  在调用 JSON.stringify 时调用 toJSON 方法。  

        var contact = new Object();

         contact.firstname = "Jesper";

         contact.surname = "Aaberg";

         contact.phone = ["555-0100", "555-0120"];

         contact.toJSON = function(key           var replacement = new Object();

           for (var val in this)
          {
              if (typeof (this[val]) === 'string')
                  replacement[val] = this[val].toUpperCase();
              else
                  replacement[val] = this[val]
          }
          return replacement;
      };
    
      var jsonText = JSON.stringify(contact);
    
      /* The value of jsonText is:
      '{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'
      */
      
    以下示例演示如何使用作为 Date 对象的内置成员的 toJSON 方法。 
      var dt = new Date('8/24/2009');
      dt.setUTCHours(7, 30, 0);
      var jsonText = JSON.stringify(dt);
    
      /* The value of jsonText is:
      '"2009-08-24T07:30:00Z"'
      */
     
     
  • 相关阅读:
    开源的excel读取库libxls在windows下的编译,且支持中文,全网首发
    UTF8与GBK、GB2312等其他字符编码的相互转换
    深入理解Netty框架
    论一道编程面试题解法
    JVM调优总结-Xms -Xmx -Xmn -Xss
    Linux上安装jdk1.8和配置环境变量
    .NET GC垃圾回收器
    T4 模板
    Vue 环境搭建
    Spring Cloud 入门系列(一)
  • 原文地址:https://www.cnblogs.com/john-sr/p/5824542.html
Copyright © 2011-2022 走看看