Ich habe ein umfangreiches Array wie dieses:
[ {Id: 1, Name: 'Red', optionName: 'Color'}, {Id: 2, Name: 'Gelb', OptionName: 'Farbe'}, {Id: 3, Name: 'Blue', optionName: 'Color'}, {Id: 4, Name: 'Green', optionName: 'Color'}, {Id: 7, Name: 'Schwarz', optionName: 'Farbe'}, {Id: 8, Name: 'S', optionName: 'Size'}, {Id: 11, Name: 'M', optionName: 'Size'}, {Id: 12, Name: 'L', optionName: 'Size'}, {Id: 13, Name: 'XL', optionName: 'Size'}, {Id: 14, Name: 'XXL', optionName: 'Size'} ] Ich muss nach optionName gruppieren und zwei Zeilen im Hauptarray haben, etwa so:
[ { Name: 'Farbe', Daten:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Gelb'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Grün'}, {Id: 7, Name: 'Schwarz'}] }, { Name: 'Größe', Daten:[{Id: 8, Name: 'S'}, {ID: 11, Name: 'M'}, {ID: 12, Name: 'L'}, {ID: 13, Name: 'XL'}, {ID: 14, Name: 'XXL'}] } ] Wie implementiert man es in Javascript?
An ES6 solution using Map object:
function groupBy(arr, key) { return arr.reduce( (sum, item) => { const groupByVal = item[key]; groupedItems = sum.get(groupByVal) || []; groupedItems.push(item); return sum.set(groupByVal, groupedItems); }, new Map() ); } var Data = [ { Id: 1, Name: 'Red', optionName: 'Color' }, { Id: 2, Name: 'Yellow', optionName: 'Color' }, { Id: 3, Name: 'Blue', optionName: 'Color' }, { Id: 4, Name: 'Green', optionName: 'Color' }, { Id: 7, Name: 'Black', optionName: 'Color' }, { Id: 8, Name: 'S', optionName: 'Size' }, { Id: 11, Name: 'M', optionName: 'Size' }, { Id: 12, Name: 'L', optionName: 'Size' }, { Id: 13, Name: 'XL', optionName: 'Size' }, { Id: 14, Name: 'XXL', optionName: 'Size' } ]; document.getElementById("showArray").innerHTML =JSON.stringify([...groupBy(Data, 'optionName')], null, 4);这是我为这种情况编写的代码片段。您可以将此功能添加到所有数组中：
Object.defineProperty(Array.prototype, 'group', { enumerable: false, value: function (key) { var map = {}; this.forEach(function (e) { var k = key(e); map[k] = map[k] || []; map[k].push(e); }); return Object.keys(map).map(function (k) { return {key: k, data: map[k]}; }); } });您可以像这样使用它。您只需传递一个定义如何分组数据的函数。
var newArray = arr.group(function (item) { return item.optionName; });Working Fiddle
如果需要，您可以将
{key: k, data: map[k]}替换为{Name: k, Data: map[k]}。这也是上面代码的更紧凑的ES6版本：
Object.defineProperty(Array.prototype, 'group', { enumerable: false, value: function (key) { let map = {}; this.map(e => ({k: key(e), d: e})).forEach(e => { map[e.k] = map[e.k] || []; map[e.k].push(e.d); }); return Object.keys(map).map(k => ({key: k, data: map[k]})); } });像这样使用它：