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"'
  */
 
 
原文地址:https://www.cnblogs.com/john-sr/p/5824542.html