javascript - 如何使用 Underscore.js 从平面列表创建嵌套对象？

Question

给出输入和订单:

input = [
    {
        "top": "peach", 
        "middle": "monkey",
        "bottom": "blue"
    },
    {
        "top": "peach", 
        "middle": "monkey",
        "bottom": "red"
    },
    {
        "top": "peach", 
        "middle": "cat",
        "bottom": "brown"
    },
    {
        "top": "peach", 
        "middle": "cat",
        "bottom": "black"
    },
    {
        "top": "peach", 
        "middle": "dog",
        "bottom": "purple"
    }
];

order = ["top", "middle", "bottom"];

生成“嵌套”输出:

output =     {
    "name": "peach",
    "children": [
        {
            "name": "monkey",
            "children": [
                { "name": "blue" },
                { "name": "red" }
            ]
        },
        {
            "name": "cat",
            "children": [
                { "name": "brown" },
                { "name": "black" }
            ]
        },
        {
            "name": "dog",
            "children": [
                { "name": "purple" }
            ]
        }
    ]
};

我知道它与 _.groupBy() 和使用递归有关，但我无法理解它......

Answer 1

这是一个递归解决方案，使用 groupBy 订单列表中的每个项目:

var nestedGroup = function(list, order) {

    if( _.isEmpty(order)) return [];

    var groups = _.groupBy(list, _.first(order));

    return _.map(groups, function(children, key){
        var group = {
            name: key,
            children: nestedGroup(children, _.rest(order))
        };

        return _.isEmpty(group.children) ? _.omit(group, 'children') : group;
    });
}

var groups = nestedGroup(input, order);

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
  
	var input = [
	    {
	        "top": "peach", 
	        "middle": "monkey",
	        "bottom": "blue"
	    },
	    {
	        "top": "peach", 
	        "middle": "monkey",
	        "bottom": "red"
	    },
	    {
	        "top": "peach", 
	        "middle": "cat",
	        "bottom": "brown"
	    },
	    {
	        "top": "peach", 
	        "middle": "cat",
	        "bottom": "black"
	    },
	    {
	        "top": "peach", 
	        "middle": "dog",
	        "bottom": "purple"
	    }
	];

	var order = ["top", "middle", "bottom"];

	var nestedGroup = function(list, order) {

		if( _.isEmpty(order)) return [];

		var groups = _.groupBy(list, _.first(order));

		return _.map(groups, function(children, key){
			var group = {
				name: key,
				children: nestedGroup(children, _.rest(order))
			};

			return _.isEmpty(group.children) ? _.omit(group, 'children') : group;
		});
	}

	var groups = nestedGroup(input, order);
  
    $scope.groups = groups;
});

  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  <p>{{groups || json}}</p>
</div>