Javascript創建從平面對象嵌套的對象

Question

我想創建一個層次結構，以便我可以將數據傳遞給我用來生成組織結構圖的插件。

對於我的組織結構圖，我掌握了所有需要處理的數據，例如員工和他們的一些基本數據。

FirstName 
LastName 
EmployeeID 
ManagerEmployeeID 
Manager Name 

此數據存儲在一個沒有嵌套的數組或不同的層次，這就是我想實現一些的jQuery/JavaScript之間的連接。

我的目標是採取這個數組並嵌套它基於ManagerID和EmployeeID，所以我可以做一個樹層次結構。

我無法改變數據如何提供給我，否則我會從數據庫響應中嵌套它。

實施例的數據：

• Tom Jones 
    o Alice Wong 
    o Tommy J. 
• Billy Bob 
    o Rik A. 
    ♣ Bob Small 
    ♣ Small Jones 
    o Eric C. 

我的平坦數據例如：

{ 
     "FirstName": "Tom" 
     "LastName": "Jones" 
     "EmployeeID": "123" 
     "ManagerEmployeeID": "" 
     "Manager Name": "" 
    }, 
    { 
     "FirstName": "Alice" 
     "LastName": "Wong" 
     "EmployeeID": "456" 
     "ManagerEmployeeID": "123" 
     "Manager Name": "Tom Jones" 
    }, 
    { 
     "FirstName": "Tommy" 
     "LastName": "J." 
     "EmployeeID": "654" 
     "ManagerEmployeeID": "123" 
     "Manager Name": "Tom Jones" 
    }, 
    { 
     "FirstName": "Billy" 
     "LastName": "Bob" 
     "EmployeeID": "777" 
     "ManagerEmployeeID": "" 
     "Manager Name": "" 
    }, 
    { 
     "FirstName": "Rik" 
     "LastName": "A." 
     "EmployeeID": "622" 
     "ManagerEmployeeID": "777" 
     "Manager Name": "Billy Bob" 
    }, 
    { 
     "FirstName": "Bob" 
     "LastName": "Small" 
     "EmployeeID": "111" 
     "ManagerEmployeeID": "622" 
     "Manager Name": "Rik A." 
    }, 
    { 
     "FirstName": "Small" 
     "LastName": "Jones" 
     "EmployeeID": "098" 
     "ManagerEmployeeID": "622" 
     "Manager Name": "Rik A" 
    }, 
    { 
     "FirstName": "Eric" 
     "LastName": "C." 
     "EmployeeID": "222" 
     "ManagerEmployeeID": "777" 
     "Manager Name": "Billy Bob" 
    } 

實施例所需的輸出：

{ 
    "FirstName": "Tom", 
    "LastName": "Jones", 
    "EmployeeID": "123", 
    "ManagerEmployeeID": "", 
    "Manager Name": "", 
    { 
     "FirstName": "Alice", 
     "LastName": "Wong", 
     "EmployeeID": "456", 
     "ManagerEmployeeID": "123", 
     "Manager Name": "Tom Jones", 

    }, 
    { 
     "FirstName": "Tommy", 
     "LastName": "J.", 
     "EmployeeID": "654", 
     "ManagerEmployeeID": "123", 
     "Manager Name": "Tom Jones", 

    }, 

}, 
{ 
    "FirstName": "Billy", 
    "LastName": "Bob", 
    "EmployeeID": "777", 
    "ManagerEmployeeID": "", 
    "Manager Name": "", 
    { 
     "FirstName": "Rik", 
     "LastName": "A.", 
     "EmployeeID": "622", 
     "ManagerEmployeeID": "777", 
     "Manager Name": "Billy Bob", 
     , 
     { 
      "FirstName": "Bob", 
      "LastName": "Small", 
      "EmployeeID": "111", 
      "ManagerEmployeeID": "622", 
      "Manager Name": "Rik A.", 

     }, 
     { 
      "FirstName": "Small", 
      "LastName": "Jones", 
      "EmployeeID": "098", 
      "ManagerEmployeeID": "622", 
      "Manager Name": "Rik A", 

     }, 

    }, 

}, 
{ 
    "FirstName": "Eric", 
    "LastName": "C.", 
    "EmployeeID": "222", 
    "ManagerEmployeeID": "777", 
    "Manager Name": "Billy Bob", 

} 

有沒有什麼最佳實踐來實現這樣的東西？如果我有能力在數據庫級別這樣做，我會的。但是，我只有一份數據清單，以及基於ID的經理和員工之間的關聯。

Answer 1

您可以使用reduce()創建遞歸函數並返回所需的數據結構。

var data = [{"FirstName":"Tom","LastName":"Jones","EmployeeID":"123","ManagerEmployeeID":"","Manager Name":""},{"FirstName":"Alice","LastName":"Wong","EmployeeID":"456","ManagerEmployeeID":"123","Manager Name":"Tom Jones"},{"FirstName":"Tommy","LastName":"J.","EmployeeID":"654","ManagerEmployeeID":"123","Manager Name":"Tom Jones"},{"FirstName":"Billy","LastName":"Bob","EmployeeID":"777","ManagerEmployeeID":"","Manager Name":""},{"FirstName":"Rik","LastName":"A.","EmployeeID":"622","ManagerEmployeeID":"777","Manager Name":"Billy Bob"},{"FirstName":"Bob","LastName":"Small","EmployeeID":"111","ManagerEmployeeID":"622","Manager Name":"Rik A."},{"FirstName":"Small","LastName":"Jones","EmployeeID":"098","ManagerEmployeeID":"622","Manager Name":"Rik A"},{"FirstName":"Eric","LastName":"C.","EmployeeID":"222","ManagerEmployeeID":"777","Manager Name":"Billy Bob"}]; 
 

 
function makeTree(data, parentId) { 
 
    return data.reduce(function(r, e) { 
 
    if (e.ManagerEmployeeID == parentId) { 
 
     var employees = makeTree(data, e.EmployeeID); 
 
     if (employees.length) e.employees = employees 
 
     r.push(e) 
 
    } 
 
    return r; 
 
    }, []) 
 
} 
 

 
console.log(makeTree(data, ''))

Answer 2

所需的輸出不是JavaScript的有效數據結構。你需要在該對象中的一些鍵指向「孩子」。對於解決方案 - 通常，您遍歷整個對象保存ID作爲對象中的鍵，其餘爲給定ID的值。例如

let tree = {} 
flat.forEach(function(item) { 
    item.children = []; 
    tree[item.id] = item // build whole tree 

    // in case it is ordered by parent, you can use 
    tree[item.parentId].children.push(item); 
}) 
// in case it is not ordered, you have to traverse the structure again 
flat.forEach(function(item) { 
    tree[item.parentId].children.push(item); 
}) 

Answer 3

你可以使用一個循環的方法，並檢查父母，又名ManagerEmployeeID和孩子。

此提議也適用於未排序的數據，無需遞歸。

var data = [{ FirstName: "Tom", LastName: "Jones", EmployeeID: "123", ManagerEmployeeID: "", "Manager Name": "" }, { FirstName: "Alice", LastName: "Wong", EmployeeID: "456", ManagerEmployeeID: "123", "Manager Name": "Tom Jones" }, { FirstName: "Tommy", LastName: "J.", EmployeeID: "654", ManagerEmployeeID: "123", "Manager Name": "Tom Jones" }, { FirstName: "Billy", LastName: "Bob", EmployeeID: "777", ManagerEmployeeID: "", "Manager Name": "" }, { FirstName: "Rik", LastName: "A.", EmployeeID: "622", ManagerEmployeeID: "777", "Manager Name": "Billy Bob" }, { FirstName: "Bob", LastName: "Small", EmployeeID: "111", ManagerEmployeeID: "622", "Manager Name": "Rik A." }, { FirstName: "Small", LastName: "Jones", EmployeeID: "098", ManagerEmployeeID: "622", "Manager Name": "Rik A" }, { FirstName: "Eric", LastName: "C.", EmployeeID: "222", ManagerEmployeeID: "777", "Manager Name": "Billy Bob" }], 
 
    tree = function (data, root) { 
 
     var r = [], 
 
      o = {}; 
 

 
     data.forEach(function (a) { 
 
      a.children = o[a.EmployeeID] && o[a.EmployeeID].children; 
 
      o[a.EmployeeID] = a; 
 
      if (a.ManagerEmployeeID === root) { 
 
       r.push(a); 
 
      } else { 
 
       o[a.ManagerEmployeeID] = o[a.ManagerEmployeeID] || {}; 
 
       o[a.ManagerEmployeeID].children = o[a.ManagerEmployeeID].children || []; 
 
       o[a.ManagerEmployeeID].children.push(a); 
 
      } 
 
     }); 
 
     return r; 
 
    }(data, ''); 
 

 
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

的問題是，你需要指定root，在這種情況下MgrQID: "5555"，其中"5555"是根值調用函數

tree = function (data, root) { 
    // code 
}(data, "5555"); 
//  ^^^^^^ 

var data = [{ QID: "1234", MgrQID: "5555", PositionTitle: "Manager, Systems Administration 3" }, { QID:"5678", MgrQID: "1234", PositionTitle: "Systems Administrator 3" }], 
 
    tree = function (data, root) { 
 
     var r = [], 
 
      o = {}; 
 

 
     data.forEach(function (a) { 
 
      a.children = o[a.QID] && o[a.QID].children; 
 
      o[a.QID] = a; 
 
      if (a.MgrQID === root) { 
 
       r.push(a); 
 
      } else { 
 
       o[a.MgrQID] = o[a.MgrQID] || {}; 
 
       o[a.MgrQID].children = o[a.MgrQID].children || []; 
 
       o[a.MgrQID].children.push(a); 
 
      } 
 
     }); 
 
     return r; 
 
    }(data, "5555"); 
 

 
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }