對象數組映射到網格（表）使用lodash？

Question

所以，讓我們說我有對象的一個​​不錯的平板陣列：

let workers = [{ 
    name: 'Tom', 
    age: 20, 
    town: 'Paris' 
    gender: 'M', 
    position: 'DEV' 
},{ 
    name: 'Mike', 
    age: 21, 
    town: 'Paris' 
    gender: 'M', 
    position: 'DEV' 
},{ 
    name: 'Jake', 
    age: 20, 
    town: 'London' 
    gender: 'M', 
    position: 'DEV' 
},{ 
    name: 'Simona', 
    age: 25, 
    town: 'Rome' 
    gender: 'F', 
    position: 'DEV' 
},{ 
    name: 'Manuela', 
    age: 20, 
    town: 'Rome' 
    gender: 'F', 
    position: 'DEV' 
},{ 
    name: 'Angelo', 
    age: 22, 
    town: 'Milan' 
    gender: 'M', 
    position: 'PR' 
},{ 
    name: 'Oliver', 
    age: 30, 
    town: 'Berlin' 
    gender: 'M', 
    position: 'PR' 
}]; 

我想創建一個網格依賴於我的期望的特性（行和列）..

array2gridAll（陣列，rowProperty，colPropery）

let rows = array2gridAll(workers, 'position', 'town'); 

因此電網會是這樣

|----------------------------------------------------------------------------|--------------| 
|    | Berlin | London |  Milan  |  Paris  |  Rome  | 
|----------------------------------------------------------------------------|--------------| 
|    |  {}  | Jake{} |  {}  |  Tom{}  | Simona{} | 
|  DEV  |------------------------------------------------------------|--------------| 
|    |  {}  |  {}  |  {}  |  Mike{} | Manuela{} | 
|----------------------------------------------------------------------------|--------------| 
|  PR  | Oliver{} |  {}  | Angelo{} |  {}  |  {}  | 
|-------------------------------------------------------------------------------------------| 

因此實際陣列：

rows = [ 
    [ 
     { 

     },{ 
      name: 'Jake', 
      age: 20, 
      town: 'London' 
      gender: 'M', 
      position: 'DEV' 
     { 

     },{ 
      name: 'Tom', 
      age: 20, 
      town: 'Paris' 
      gender: 'M', 
      position: 'DEV' 
     },{ 
      name: 'Simona', 
      age: 25, 
      town: 'Rome' 
      gender: 'F', 
      position: 'DEV' 
     } 
    ], 
    [ 
     { 

     },{ 

     },{ 

     },{ 
      name: 'Mike', 
      age: 21, 
      town: 'Paris' 
      gender: 'M', 
      position: 'DEV' 
     },{ 
      name: 'Manuela', 
      age: 20, 
      town: 'Rome' 
      gender: 'F', 
      position: 'DEV' 
     }, 
    ], 
    [ 
     { 
      name: 'Oliver', 
      age: 30, 
      town: 'Berlin' 
      gender: 'M', 
      position: 'PR' 
     },{ 

     },{ 
      name: 'Angelo', 
      age: 22, 
      town: 'Milan' 
      gender: 'M', 
      position: 'PR' 
     },{ 

     },{ 

     } 
    ] 
]; 

希望它有意義嗎？

其它功能將

array2grid（陣列，rowProperty，行，colPropery，COLS）

let rows = array2grid(workers, 'position', ['DEV'], 'town', ['Rome', 'Paris']); 

在那裏我會得到

|------------------------------------------------| 
|    |  Rome  |  Paris  | 
|------------------------------------------------| 
|    |  Simona{} |  Tom{}  | 
|  DEV  |--------------------------------| 
|    | Manuela{} |  Mike{}  | 
|------------------------------------------------| 

rows = [ 
    [{ 
     name: 'Simona', 
     age: 25, 
     town: 'Rome' 
     gender: 'F', 
     position: 'DEV' 
    },{ 
     name: 'Tom', 
     age: 20, 
     town: 'Paris' 
     gender: 'M', 
     position: 'DEV' 
    }], 
    [{ 
     name: 'Manuela', 
     age: 20, 
     town: 'Rome' 
     gender: 'F', 
     position: 'DEV' 
    },{ 
     name: 'Mike', 
     age: 21, 
     town: 'Paris' 
     gender: 'M', 
     position: 'DEV' 
    }] 
]; 

尷尬的是我在我把這個問題放在一起的時候，我可以開發它自己:)

但想知道最乾淨的方法嗎？

Answer 1

沒有lodash。沒有完整的表格。但是有兩種方法可以達到結構化的結果。

1. 一個包含名稱的數組，作爲其他數據的代理。
2. 反映級別的對象。

爲什麼是數組？它直接工作，但它不是很通用，因爲只過濾需要的行/列。

具有層次結構的對象更容易創建並過濾僅獲取想要的位置或城鎮。

function getGrid(array, rowKey, colKey) { 
 
    var grid = [], 
 
     cols = Object.create(null), 
 
     rows = Object.create(null), 
 
     colLength = 0, 
 
     rowLength = 0; 
 

 
    array.forEach(function (a) { 
 
     var row, col; 
 
     if (!(a[rowKey] in rows)) { 
 
      rows[a[rowKey]] = rowLength++; 
 
     } 
 
     if (!(a[colKey] in cols)) { 
 
      cols[a[colKey]] = colLength++; 
 
     } 
 
     row = rows[a[rowKey]]; 
 
     col = cols[a[colKey]]; 
 

 
     grid[row] = grid[row] || []; 
 
     if (col in grid[row]) { 
 
      if (!Array.isArray(grid[row][col])) { 
 
       grid[row][col] = [grid[row][col]]; 
 
      } 
 
      grid[row][col].push(a.name); 
 
     } else { 
 
      grid[row][col] = a.name; 
 
     } 
 
    }); 
 
    return grid; 
 
} 
 

 
function getObject(array, rowKey, colKey) { 
 
    var object = {}; 
 

 
    array.forEach(function (a) { 
 
     object[a[rowKey]] = object[a[rowKey]] || {}; 
 
     object[a[rowKey]][a[colKey]] = object[a[rowKey]][a[colKey]] || []; 
 
     object[a[rowKey]][a[colKey]].push(a.name); 
 
    }); 
 

 
    return object; 
 
} 
 

 
var workers = [{ name: 'Tom', age: 20, town: 'Paris', gender: 'M', position: 'DEV' }, { name: 'Mike', age: 21, town: 'Paris', gender: 'M', position: 'DEV' }, { name: 'Jake', age: 20, town: 'London', gender: 'M', position: 'DEV' }, { name: 'Simona', age: 25, town: 'Rome', gender: 'F', position: 'DEV' }, { name: 'Manuela', age: 20, town: 'Rome', gender: 'F', position: 'DEV' }, { name: 'Angelo', age: 22, town: 'Milan', gender: 'M', position: 'PR' }, { name: 'Oliver', age: 30, town: 'Berlin', gender: 'M', position: 'PR' }]; 
 

 
console.log(getGrid(workers, 'position', 'town')); 
 
console.log(getObject(workers, 'position', 'town'));

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