<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json-query</title>
<script type="text/javascript">
var json = [{"value":"1","text":"中國","pid":"0","children":[{"value":"2","text":"山東省","pid":"1","children":[{"value":"3","text":"濟南市","pid":"2","children":[{"value":"4","text":"歷城區","pid":"3","children":[]},{"value":"5","text":"歷下區","pid":"3","children":[]},{"value":"6","text":"高新區","pid":"3","children":[{"value":"fe8de48f20e54590bf60a83c4485a650","text":"南白花","pid":"6","children":[]},{"value":"4ac6d79609b5496f9296614ef4166ac7","text":"北白花","pid":"6","children":[]}]}]}]}]}]
</script>
<script type="text/javascript">
/**
* 遞歸查詢JSON樹 父子節點
*/
var parentNode = null;
var node = null;
/**
* 根據text查找當前節點以及父節點
*/
function getNode(json, text) {
//1.第一層 root 深度遍歷整個JSON
for (var i = 0; i < json.length; i++) {
if (node) {
break;
}
var obj = json[i];
//沒有就下一個
if (!obj || !obj.text) {
continue;
}
//2.有節點就開始找，一直遞歸下去
if (obj.text == text) {
//找到了與text匹配的節點，結束遞歸
node = obj;
break;
} else {
//3.如果有子節點就開始找
if (obj.children&&obj.children.length!=0) {
//4.遞歸前，記錄當前節點，作為parent 父親
parentNode = obj;
//遞歸往下找
getNode(obj.children, text);
} else {
//跳出當前遞歸，返回上層遞歸
continue;
}
}
}
//5.如果木有找到父節點，置為null，因為沒有父親
if (!node) {
parentNode = null;
}
//6.返回結果obj
return {
parentNode: parentNode,
node: node
};
}
//批量查詢
var query = '南白花';
var result = [];
var getResult = function(json,query){
node = null;
parentNode = null;
var obj = getNode(json, query);
//判斷是否閉包
if(obj.parentNode){
//有父節點
console.log("查詢text:" + query + ", 結果:" + obj.node.text + " -> 父級:" + (obj.parentNode ? obj.parentNode.text : '木有父級!'));
//獲取父節點text繼續查祖節點
getResult(json,obj.parentNode.text);
result.push(obj.parentNode.text);
}
return result;
}
getResult(json,query);
//最后將查詢push到result中
result.push(query);
console.log(result);//['中國','山東省','濟南市','高新區','南白花']
</script>
</head>
<body>
</body>
</html>
