对象数组映射到网格（表）使用lodash？

问题描述：

所以，让我们说我有对象的一个不错的平板阵列：对象数组映射到网格（表）使用lodash？

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' 
    }] 
];

尴尬的是我在我把这个问题放在一起的时候，我可以开发它自己:)

但想知道最干净的方法吗？

拿什么干净的方法，如果你不表现出一定的代码？ –

没有代码显示...我会去很长的路线，并做到这一点普通的JavaScript ...但有选择去lodash，我并不真正熟悉它提供的所有... –

然后，我建议阅读他们的文档并熟悉它。 – evolutionxbox

答

没有lodash。没有完整的表格。但是有两种方法可以达到结构化的结果。

一个包含名称的数组，作为其他数据的代理。
反映级别的对象。

为什么是数组？它直接工作，但它不是很通用，因为只过滤需要的行/列。

具有层次结构的对象更容易创建并过滤仅获取想要的位置或城镇。

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; }

对象数组映射到网格（表）使用lodash？

相关推荐