Question

我想为反应组件自动生成树视图。我有多个文件有自己的路径。例如：

COM /公司/模型/ Main.java
COM /公司/控制器/ Move.java
COM /公司/控制器/ Rotate.java
COM /公司/视图/ Watch.java

目标是让对象数据如下所示：

var data = {
   name: com,
       children: [{name: company,
                   children: [
                   {name: model,
                     children: [{name: Main.java}]
                   },
                   {name: controller,
                     children: [{name: Move.java},{name: Rotate.java}]
                   },
                   {name: view,
                     children: [{name: Watch.java}]
                   }
                 ]}]
 }

我发现这个lib将路径拆分为选项卡：https://nodejs.org/api/path.html

像这样：

var path = com/company/model/Main.java ;
var dirname = path.dirname(path); // => « com/company/model »
var folders = dirname.split(path.sep); // => folders = [‘com’,’compagny’,’model’]

我尝试使用lodash https://lodash.com/docs 要自动生成这个没有成功，请帮助我

Answer 1

使用this answer的略微修改版本：

var _ = require('lodash');
var path = require('path');

var paths = [
    'com/company/model/Main.java',
    'com/company/controller/Move.java',
    'com/company/controller/Rotate.java',
    'com/company/view/Watch.java'
];

// build input data from the paths
// {
//     "lvl0": "com",
//     "lvl1": "company",
//     "lvl2": "model",
//     "name": "Main.java",
//     "path": "com/company/model/Main.java"
// }
var data = paths.map(function (el) {
    // var folders = path.dirname(el).split(path.sep);
    var folders = path.dirname(el).split('/');
    var obj = {};
    for (var i = 0; i < folders.length; i++) {
        obj['lvl' + i] = folders[i];
    }
    obj.name = path.basename(el);
    obj.path = el;
    return obj;
});

// add a new function to lodash
_.mixin({
    groupByMulti: function (obj, values, context) {
        if (!values.length) return obj;
        var byFirst = _.groupBy(obj, _.head(values), context);
        for (var prop in byFirst) {
            byFirst[prop] = _.groupByMulti(byFirst[prop], _.tail(values), context);
        }
        byFirst = _.map(byFirst, function (rows, key) {
            return { name: key, children: rows };
        });
        return byFirst;
    }
});

var out = _.groupByMulti(data, ['lvl0', 'lvl1', 'lvl2'])[0];
console.log(JSON.stringify(out, null, 3));

Lodash自动生成树视图

1 个答案: