json數據格式及json校驗格式化工具簡單實現

時間 2019-12-05

標籤 json 數據格式校驗格式化工具簡單實現欄目 JavaScript 简体版

原文原文鏈接

　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，可是也使用了相似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。易於人閱讀和編寫，同時也易於機器解析和生成。 XML也是一種數據交換格式，爲何沒有選擇XML呢？由於XML雖然能夠做爲跨平臺的數據交換格式，可是在JS中處理XML很是不方便，同時XML標記比數據多，增長了交換產生的流量，而JSON沒有附加的任何標記，在JS中可做爲對象處理，因此咱們更傾向於選擇JSON來交換數據。javascript

一.json結構及形式

結構1:html

　　「名稱/值」對的集合（A collection of name/value pairs）。不一樣的語言中，它被理解爲對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組（associative array）。java

對應的形式爲：編程

　　對象是一個無序的「‘名稱/值’對」集合。一個對象以「{」（左括號）開始，「}」（右括號）結束。每一個「名稱」後跟一個「:」（冒號）；「‘名稱/值’ 對」之間使用「,」（逗號）分隔。json

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

結構2:數組

　　值的有序列表（An ordered list of values）。在大部分語言中，它被理解爲數組（array）。工具

對應的形式爲：spa

　　數組是值（value）的有序集合。一個數組以「[」（左中括號）開始，「]」（右中括號）結束。值之間使用「,」（逗號）分隔。debug

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

二.json字符串轉化爲json對象

字符串（string）是由雙引號包圍的任意數量Unicode字符的集合，使用反斜線轉義。一個字符（character）即一個單獨的字符串（character string）。字符串（string）與C或者Java的字符串很是類似。code

對應的形式：

 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格式化工具，效果以下：

初始數據：

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>