Lodash自動生成樹視圖

Question

我想為我的React組件自動生成一個樹形視圖。 我有多個文件，它們都有自己的路徑。 例如：

• com / company / model / Main.java
• com / company / controller / Move.java
• com / company / controller / Rotate.java
• com / company / view / 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}]
                   }
                 ]}]
 }

我發現這個庫將我的路徑拆分到一個標簽頁： 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

使用此答案的稍作修改的版本：

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