json轉json樹狀結構

Danna_Danna發表於2015-06-30
JSON

        在寫Restful服務的時候，因為都是返回去的都是一條條的json物件，這些都物件之間又是有關係的，但是卻沒有很好的體現出來，返回到頁面的時候，不能成為一個樹。返回去的json串資料如下：

[{"belongsname":"","id":901,"isleaf":0,"name":"XJBHX-2標專案部","pid":"","type":""},{"belongsname":"","id":902,"isleaf":1,"name":"綜合部(辦公室)","pid":"901","type":""},{"belongsname":"","id":903,"isleaf":1,"name":"工程部(工技部/技術部)","pid":"901","type":""},{"belongsname":"","id":904,"isleaf":1,"name":"安質部","pid":"901","type":""},{"belongsname":"","id":905,"isleaf":1,"name":"計財部","pid":"901","type":""},{"belongsname":"","id":906,"isleaf":1,"name":"物設部(物機部)","pid":"901","type":""},{"belongsname":"","id":907,"isleaf":1,"name":"中心試驗室","pid":"901","type":""}] 

而我們在前臺介面上需要的資料可能是這樣的：

[
    {
        "belongsname": "", 
        "id": 901, 
        "isleaf": 0, 
        "name": "XJBHX-2標專案部", 
        "pid": "", 
        "type": ""
        "children":[  {
                 "belongsname": "", 
                 "id": 902, 
                "isleaf": 1, 
                "name": "綜合部(辦公室)", 
                "pid": "901", 
                "type": ""
           }, 
          {
                 "belongsname": "", 
                 "id": 903, 
                "isleaf": 1, 
                 "name": "工程部(工技部/技術部)", 
                "pid": "901", 
                "type": ""
          }, 
          {
               "belongsname": "", 
               "id": 904, 
                "isleaf": 1, 
                "name": "安質部", 
                 "pid": "901", 
                "type": ""
         }, 
        {
              "belongsname": "", 
               "id": 905, 
               "isleaf": 1, 
               "name": "計財部", 
               "pid": "901", 
               "type": ""
         }, 
         {
                "belongsname": "", 
               "id": 906, 
               "isleaf": 1, 
               "name": "物設部(物機部)", 
               "pid": "901", 
                "type": ""
          }, 
          {
              "belongsname": "", 
               "id": 907, 
               "isleaf": 1, 
              "name": "中心試驗室", 
                "pid": "901", 
                "type": ""
          }]
]

怎麼轉換呢？看示例：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
	//將json串轉換成樹形結構
	function transData(a, idStr, pidStr, chindrenStr) {
		var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
		for (; i < len; i++) {
			hash[a[i][id]] = a[i];
		}
		for (; j < len; j++) {
			var aVal = a[j], hashVP = hash[aVal[pid]];
			if (hashVP) {
				!hashVP[children] && (hashVP[children] = []);
				hashVP[children].push(aVal);
			} else {
				r.push(aVal);
			}
		}
		return r;
	}
	
	//測試方法
	function test() {
		//json串
		var jsonData = eval('[{"belongsname":"","id":901,"isleaf":0,"name":"XJBHX-2標專案部","pid":"","type":""},{"belongsname":"","id":902,"isleaf":1,"name":"綜合部(辦公室)","pid":"901","type":""},{"belongsname":"","id":903,"isleaf":1,"name":"工程部(工技部/技術部)","pid":"901","type":""},{"belongsname":"","id":904,"isleaf":1,"name":"安質部","pid":"901","type":""},{"belongsname":"","id":905,"isleaf":1,"name":"計財部","pid":"901","type":""},{"belongsname":"","id":906,"isleaf":1,"name":"物設部(物機部)","pid":"901","type":""},{"belongsname":"","id":907,"isleaf":1,"name":"中心試驗室","pid":"901","type":""}]');
		//繫結的欄位
		var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
		console.log(jsonDataTree);
	}
	//窗體載入執行的方法
	window.onload = test;
</script>
</head>
</head>
<body>
</body>
</html>


總結：

       剛開始做的時候，想複雜了，想著自己去遍歷然後手動拼寫json串，網路永遠做著我們先做的事。

相關文章