JSON常用方法

JSON數據常用的數據處理方法：
一、JSON對象和JSON字符串的轉換
JSON在數據傳輸過程中，JSON是以字符串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字符串之間的相互轉換是關鍵。例如：
JSON字符串：
var jsonStr ='{"name":"Liza", "password":"123"}' ;
JSON對象：
var jsonObj = {"name":"Liza", "password":"123"};

1.JSON字符串轉化JSON對象
var jsonObject= jQuery.parseJSON(jsonstr);
console.log(jsonObject) //{name:"Liza",password:"123"}
2.JSON對象轉化JSON字符串
var jsonstr =JSON.stringify(jsonObject );
console.log(jsonstr) //{"name":"Liza", "password":"123"}
二、JSON的輸出美化
JSON.stringify(value[, replacer [, space]])

將JSON轉化為字符串可以用JSON.stringify() 方法，stringify還有個可選參數space，可以指定縮進用的空白字符串，用於美化輸出（pretty-print）；
space參數是個數字，它代表有多少的空格；上限為10。該值若小於1，則意味着沒有空格；如果該參數沒有提供（或者為null）將沒有空格。
執行下面代碼：
var jsonObject = {"root":{"id":"1","text":"復選框","layout":"map","children":[{"id":"1.1","text":"必填項驗證","side":"right"},
                    {"id":"1.2","text":"選中后狀態","side":"left"},{"id":"1.3","text":"未選擇狀態，默認顯示樣式","side":"middle"}]}};
var formatJsonStr = JSON.stringify(jsonObject,undefined,2);
console.log(formatJsonStr);
//輸出如下：
{
    "root": {
        "id": "1",
        "text": "復選框",
        "layout": "map",
        "children": [
         {
            "id": "1.1",
            "text": "必填項驗證",
            "side": "right"
         },
         {
            "id": "1.2",
            "text": "選中后狀態",
            "side": "left"
         },
         {
            "id": "1.3",
            "text": "未選擇狀態，默認顯示樣式",
            "side": "middle"
         }
        ]
    }
}
三、JSON字符串的替換
可能遇到的字符串：
var jsonstr = '{\"root\":{\"id\":\"1\",\"text\":\"復選框\",\"layout\":\"map\",\"children\":[{\"id\":\"1.1\",\"text\":\"必填項驗證\",\"side\":\"right\"},{\"id\":\"1.2\",\"text\":\"選中后狀態\",\"side\":\"left\"},{\"id\":\"1.3\",\"text\":\"未選擇狀態，默認顯示樣式\",\"side\":\"middle\"}]}}';
需要經過替換后，才能從字符串轉化成JSON對象。這里我們需要用JS實現replaceAll的功能， 將所有的 ' \\" ' 替換成  ' " ' .
代碼如下,這里的gm是固定的，g表示global，m表示multiple：
var jsonStr = jsonstr.replace(new RegExp('\\"',"gm"),'"');
console.log(jsonStr)
//{"root":{"id":"1","text":"復選框","layout":"map","children":[{"id":"1.1","text":"必填項驗證","side":"right"},{"id":"1.2","text":"選中后狀態","side":"left"},{"id":"1.3","text":"未選擇狀態，默認顯示樣式","side":"middle"}]}}
四、遍歷JSON對象和JSON數組
1、遍歷JSON對象代碼如下：
var packJson  = {"name":"Liza", "password":"123"} ;
for(var k in packJson ){  //遍歷packJson 對象的每個key/value對,k為key
    console.log(k + " " + packJson[k]);
}
//name Liza
// password 123
2、遍歷JSON數組代碼如下：
var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];

for(var i in packJson){ //遍歷packJson 數組時，i為索引
    console.log(packJson[i].name + " " + packJson[i].password);
}
//Liza 123
// Mike 456
五、遞歸遍歷
為了實現一些復雜功能常常需要遞歸遍歷JSON對象，這里給出兩個遞歸的例子，希望能給大家參考遞歸的寫法。
1、第一個例子是遞歸遍歷JSON，遇到數組的時候，數組中有超過一個對象，刪除第一個對象之后的所有對象
舉個例子，原始JSON如下：
{
    "root": {
        "id": "1",
        "text": "復選框",
        "layout": "map",
        "children": [
         {
            "id": "1.1",
            "text": "必填項驗證",
            "side": "right",
            "children": [
             {
                "id": "1.1.1",
                "text": "是"
             },
             {
                "id": "1.1.2",
                "text": "否，只能選擇"
             }
            ]
        },
        {
            "id": "1.2",
            "text": "選中后狀態",
            "side": "left"
         }
        ]
    }
}
期望處理后的JSON如下：
{
    "root": {
        "id": "1",
        "text": "復選框",
        "layout": "map",
        "children": [
         {
            "id": "1.1",
            "text": "必填項驗證",
            "side": "right",
            "children": [
             {
                "id": "1.1.1",
                "text": "是"
             }
            ]
         }
        ]
    }
}
遞歸代碼如下：

/**
*返回處理后的 json字符串
*/
function jsonParse(jsonObj) {
    distinctJson(jsonObj);
    var last=JSON.stringify(jsonObj, undefined, 2); //優化json數據
    return last;
}
/**
* 去掉 json中數組多余的項
*/
function distinctJson(obj) {
    if(obj instanceof Array) {
        if(obj.length > 1) { //數組中有超過一個對象，刪除第一個對象之后的所有對象
            obj.splice(1, (obj.length - 1));
        }
        distinctJson(obj[0]); //重新從頭開始
    } else if(obj instanceof Object) {
        for( var index in obj){
            var jsonValue = obj[index]; //接收values值
            distinctJson(jsonValue);  
        }
    }
}
2、第二個例子是遞歸查找目標節點（節點id為targetId，有且只有一個），找到后把targetChildren賦值給節點的children，
舉個例子，原始JSON如下，查找的目標節點id為5：
var obj ={
            "id": "1",
            "text": "復選框",
            "children": [
              {
                "id": "2",
                "text": "層級關聯，不選擇上一層級下拉框無法選擇"
              },
              {
                "id": "3",
                "text": "是否可以手動輸入",
                "children":[
                  {
                    "id": "4",
                    "text": "是",
                    "children":[
                      {
                        "id": "5",
                        "text": "檢索出符合條件的結果優先展示"
                      } ,
                      {
                        "id": "6",
                        "text": "大小寫區分"
                      }
                    ]
                  }
                ]
              }
            ]
        };
var targetChildren = [{
                        "id": "7",
                        "text": "關聯下拉框，選擇此下拉框內容"
                      },
                      {
                        "id": "8",
                        "text": "選中下拉框后顯示下拉框內容"
                      }];
而想要的結果是
{
    "id": "1",
    "text": "復選框",
    "children": [
      {
        "id": "2",
        "text": "層級關聯，不選擇上一層級下拉框無法選擇"
      },
      {
        "id": "3",
        "text": "是否可以手動輸入",
        "children": [
          {
            "id": "4",
            "text": "是",
            "children": [
              {
                "id": "5",
                "text": "檢索出符合條件的結果優先展示",
                "children": [
                  {
                    "id": "7",
                    "text": "關聯下拉框，選擇此下拉框內容"
                  },
                  {
                    "id": "8",
                    "text": "選中下拉框后顯示下拉框內容"
                  }
                ]
              },
              {
                "id": "6",
                "text": "大小寫區分"
              }
            ]
          }
        ]
      }
    ]
}
/**
* 遞歸查找目標節點
*/
function findTarget(obj,targetId,targetChildren){
    if(obj.id==targetId){
        obj.children=targetChildren;
        return true;
    }else{
        if(obj.children!=null){
            for(var i=0; i<obj.children.length; i++){
                var flag=findTarget(obj.children[i],targetId,targetChildren);
                if(flag==true){
                    return true;
                }
            }
        }
    }
    return false
}
findTarget(obj,5,targetChildren);
var last = JSON.stringify(obj,undefined,2);
console.log(last);