js实现json格式化,以及json校验工具的简单实现

时间: 2018-01-29阅读: 3144标签: json

 jsON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 易于人阅读和编写,同时也易于机器解析和生成。 XML也是一种数据交换格式,为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在js中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据。


一.json结构及形式

结构1:

  “名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。

对应的形式为:

  对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

结构2:

  值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

对应的形式为:

  数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

[
    {
        key1:value1,
        key2:value2 
    },
    {
         key3:value3,
         key4:value4   
    }
]


二.json字符串转化为json对象

字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。字符串(string)与C或者Java的字符串非常相似。

对应的形式:

var json_text = "{'book':{'name':'JAVA编程','author':['Liu','Xu']},'num':222}";

字符串json转化json对象有三种方式:


1.通过eval( ) 方法将字符串直接转化为JSON对象 并获得元素的值。

<script type="text/javascript">
    window.onload = function(){
       var json_text = "{'book':{'name':'JAVA编程','author':['Liu','Xu']},'num':222}";
       //使用eval()将字符串转换为对象
       var json_obj = eval("("+ json_text +")");
       //访问 book-name
       document.write(json_obj.book.name);
       //访问 book-author-Xu
       document.write(json_obj.book.author[1]);
    } 
  </script>

注意:"()"运算符


2.new Function形式

<script type="text/javascript">
    window.onload = function(){
       var json_text = "{'book':{'name':'JAVA编程','author':['Liu','Xu']},'num':222}";
       //用new Function将字符串转换为对象
       var json_obj = (new Function("return" + json_text))();
       //访问 book-name
       document.write(json_obj.book.name);
       //访问 book-author-Xu
       document.write(json_obj.book.author[1]);
    } 
  </script>


3.使用全局的JSON对象

<script type="text/javascript">
    window.onload = function(){
       var json_text = '{"book":"js"}';
       //用全局JSON将字符串json转换为json对象
       var json_obj = JSON.parse(json_text);
       //访问 book-name
       document.write(json_obj.book);
       //访问 book-author-Xu
       //document.write(json_obj.book.author[1]);
    } 
  </script>


目前IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法。注意:'{"book":"js"}'; 里面的属性需要用双引号引起来,才能解析,否则会失败。


三.json校验格式化工具简单实现

做了一个比较简单的json格式化工具,效果如下:


代码分析:

<body> 
  <textarea id="content_value">
  </textarea>
  <input type="button" value="格式化" onclick="check()">
  <textarea id="output_value">
  </textarea>
</body> 
<script type="text/javascript">
function check(){
  var text_value = document.getElementById('content_value').value;
  if(text_value == ""){
     alert("不能为空");  
     return false;
  } else {
        var res="";
        for(var i=0,j=0,k=0,ii,ele;i<text_value.length;i++)
        {//k:缩进,j:""个数
            ele=text_value.charAt(i);
            if(j%2==0&&ele=="}")
            {
                k--;                
                for(ii=0;ii<k;ii++) ele="    "+ele;
                ele="\n"+ele;
            }
            else if(j%2==0&&ele=="{")
            {
                ele+="\n";
                k++;     
                debugger;       
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(j%2==0&&ele==",")
            {
                ele+="\n";
                for(ii=0;ii<k;ii++) ele+="    ";
            }
            else if(ele=="\"") j++;
            res+=ele;        
        }
      document.getElementById('output_value').value = res;
  }
}
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/404

关闭

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

json结构化数据格式

JSON是javascript的子类,也是作为更好的互联网传输结构化数据格式逐渐取代XML,因此要理解JSON,重要的是理解它是一种数据格式,不是一种编程语言。

json与jsonp的使用

在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。备注:跨域也可以通过服务器端代理来解决;理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

JSON对象转成formData对象,formData对象转成JSON对象

在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码 ;也可使用formData.entries()

JSON.stringify()的不常见用法

JSON.stringify()只序列化可遍历属性(enumerable=true);JSON.stringify(obj, fn|arr);JSON.stringify(obj,null,number|string) 可以接受第三个参数,这个可以用来按格式打印对象

js之map及转换json、Object

set map<=>object map转obj,因为map打印出来其实是数组里套长度为二的数组,和java的不同 Object.create(null)、Object.create({}),{}的不同创建对象的区别 第一个,默认是null对象,啥方法都没有、后两个一样继承了object类,有两个内置方法

JS中解决JSON中函数及对象的深度拷贝

在JS中对于普通的json, 可用如下方式进行简单的深度拷贝,不过当json中包含一些JS中的对象及函数的时候, 用这样的方法会使数据丢失, 并且这个无法解决循环引用的问题,

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

JSON.stringfy()的使用

value 被序列化为字符串的对象;replacer 根据类型不同,其行为也不一样。如果是一个函数类型,则相当于是一个filter,可以对序列化的键值对进行加工处理;如果是一个数组,则只有符合数组中名称的key才会被输出

深入理解 JSON

我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!