使用 lodash 将数组分组为树“子”结构

Question

使用 lodash，我需要转换以下数组：

[{
    text: 'apple',
    type: 'fruit'
}, {
    text: 'pear',
    type: 'fruit',
}, {
    text: 'potato',
    type: 'vegetable'
}, {
    text: 'water',
    type: 'beverage'
}]

改成如下格式：

[{
    text: 'fruit',
    children: [{
        text: 'apple',
        type: 'fruit'
    }, {
        text: 'pear',
        type: 'fruit'
    }]
}, {
    text: 'vegetable',
    children: [{
        text: 'potato',
        type: 'vegetable'
    }]
}, {
    text: 'beverage',
    children: [{
        text: 'water',
        type: 'beverage'
    }]
}]

我尝试链接 lodash 方法，例如groupBy和transform，但很难获得我需要的结果格式。

这是我前进方向的框架：

_(arr).groupBy('type').transform(function(result, obj, type) {
    return result.push({
        name: type,
        children: obj
    });
}).value();

我遇到的问题是groupBy将数组转换为对象，因此我不能再简单地push转换为数组。由于对 lodash 比较了解（大约 4 或 5 个月的经验），我想看看其他人是否已经解决了这样的要求。

Answer 1

使用_.reduce()而不是转换，因为它可以让您指定最终产品格式：

var arr = [{
  text: 'apple',
  type: 'fruit'
}, {
  text: 'pear',
  type: 'fruit',
}, {
  text: 'potato',
  type: 'vegetable'
}, {
  text: 'water',
  type: 'beverage'
}];

var results = _(arr)
  .groupBy('type')
  .reduce(function(array, children, key) {
    array.push({
      text: key,
      children: children
    });

    return array;
  }, []);

console.log(results);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>