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/>");});