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