JSON对象遍历

<div id="out">
输出区域
</div>

---

1. 简单的JSON对象进行遍历

// 遍历简单json对象
 function traverseJsonSimpleObj(){
      var jsonObj = {"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"};
      for(var key in jsonObj){
           var html = "<p>"
           html +=  (key + ' : ' + jsonObj[key]);
           html += "</p>";
           $("#out").append(html);
      }
 }

2. 遍历json数组，元素为json对象

function traverseJsonArray(){
      var jsonArray = [{"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"},
          {"name": "kevin2", "age": 28, "sex": "男", "city": "beijing"}];
      //alert('JSON.stringify(jsonArray) = ' + JSON.stringify(jsonArray));
      for(var i=0; i<jsonArray.length; i++){
           var jsonObj = jsonArray[i];
           for(var key in jsonObj){
            var html = "<p>"
            html +=  (key + ' : ' + jsonObj[key]);
            html += "</p>";
            $("#out").append(html);
       }
       $("#out").append("-----------------------------------------------------");
      }
 }

3. 深度遍历复合Json结构数据

JSON对象里面可以嵌套多层对象(数组或对象)，嵌套层数未知

/**
 * 深度遍历
 * 复合的Json结构数据，JSON对象里面可以嵌套多层对象(数组或对象)
 */
 function deepTraverse(json){
  // 1. 变量为json对象：将key输出，value进行递归
     if(isType(json, "Object")){
          for(var key in json){
           $("#out").append(key + ' : ');
           if(isType(json[key], "Array") || isType(json[key], "Object")){
            $("#out").append("下面为子项内容<br/>");
           }
           deepTraverse(json[key]);
          }
     }
     // 2. 变量为json数组：逐个元素递归
     else if(isType(json, "Array")){
          for(var i=0; i<json.length; i++){
               var jsonObj = json[i];
               deepTraverse(jsonObj);
              // 遍历数组中的元素(为json对象)后输出：分隔线+一个换行符
              if(isType(jsonObj, "Object")){
                $("#out").append("------------------------<br/>");
               }
          }
     }
     // 3. 变量为简单数据类型：直接输出（递归函数的终止条件）
     else if(isType(json, "String") || isType(json, "Number") ||
      isType(json,"Boolean") || isType(json,"Null")){
          $("#out").append(json);
          $("#out").append("<br/>");
     }

 }

【说明】递归函数中的【步骤一】和【步骤三】形成一个完整的键值映射输出，发生递归的场景为1和2。

// 辅助函数，JS判断变量类型
/**
  * 判断类型
  * @param obj 判断的变量
  * @param type 预期的类型
  */
  function isType(obj,type){
        return Object.prototype.toString.call(obj) ==="[object "+type+"]";
    }

---

---

4. 测试

（4.1） 测试 isType(obj, type)方法

function testType(){
  console.log(isType([],"Array"));
  console.log(isType(1,"Number"));
  console.log(isType("","String"));
  console.log(isType(new Date(),"Date"));
  console.log(isType(function(){},"Function"));
  console.log(isType(new RegExp(),"RegExp"));
  console.log(isType({},"Object"));
  console.log(isType(true,"Boolean"));
  console.log(isType(null,"Null"));
  console.log(isType(undefined,"Undefined"));
 }

（4.2） 测试 JSON数据的遍历

 var json1 = {"options":[{"text":"王家湾","value":null},{"text":"李家湾","value":true},{"text":"邵家湾","value":13}]};

 var simpleJson = {"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"};
 var jsonArray = [{"name": "kevin", "age": 27, "sex": "男", "city": "shenzhen"},
      {"name": "kevin2", "age": 28, "sex": "男", "city": "beijing"}];

 var complexJson = {"中国南方":
       {"珠三角":
        [{"城市名": "深圳", "发展年限": 25, "简称": "鹏城"},
        {"城市名": "广州", "发展年限": 60, "简称": "羊城"},
        {"城市名": "珠江", "发展年限": 40, "简称": "珠城"}]
       },
      "华中地区":
       {"长三角":
        [{"城市名": "武汉", "发展年限": 80, "简称": "火炉"},
        {"城市名": "宜昌", "发展年限": 79, "简称": "宜家"},
        {"城市名": "咢州", "发展年限": 78, "简称": "小咢"}]
       }
}; 

$(function(){

  //traverseJsonSimpleObj();
  //traverseJsonArray();

  deepTraverse(simpleJson);
  $("#out").append("<hr/>");
  deepTraverse(jsonArray);
  $("#out").append("<hr/>");
  deepTraverse(complexJson);
  $("#out").append("<hr/>");

  deepTraverse(json1);
  $("#out").append("<hr/>");

});