javascript - 从多级对象数组创建 JSON 树结构

Question

我有一个像这样的 json 对象数组:

[{
    "vehicleid": 3,
    "name": "Teste2VDD",
    "brand": "Scania",
    "model": "6x2",
    "class": "class1",
    "region": "Curitiba",
    "customer": "Cliente A",
    "customerid": 1
},
{
    "vehicleid": 1,
    "name": "Teste1",
    "brand": "Volkswagen",
    "model": "5x3",
    "class": "class1",
    "region": "Curitiba",
    "customer": "Cliente A",
    "customerid": 1
},
{
    "vehicleid": 2,
    "name": "Teste3VDD",
    "brand": "Volkswagen",
    "model": "6x2",
    "class": "class2",
    "region": "Curitiba",
    "customer": "Cliente A",
    "customerid": 1
},
{
    "vehicleid": 5,
    "name": "Teste4VDD",
    "brand": "Scania",
    "model": "6x4",
    "class": "class2",
    "region": "Curitiba",
    "customer": "Novo",
    "customerid": 2
},
{
    "vehicleid": 6,
    "name": "Teste5VDD",
    "brand": "Scania",
    "model": "5x5",
    "class": "class2",
    "region": "Curitiba",
    "customer": "Novo",
    "customerid": 2
},
{
    "vehicleid": 7,
    "name": "veiculo",
    "brand": "Scania",
    "model": "5x4",
    "class": "class1",
    "region": "Porto Alegre",
    "customer": "Cliente3",
    "customerid": 3
},
{
    "vehicleid": 8,
    "name": "veiculo65",
    "brand": "Volkswagen",
    "model": "5x4",
    "class": "class3",
    "region": "Porto Alegre",
    "customer": "Cliente3",
    "customerid": 3
},
{
    "vehicleid": 11,
    "name": "Veiculo de teste h",
    "brand": "Scania",
    "model": "5x3",
    "class": "class3",
    "region": "Belo Horizonte",
    "customer": "Cliente de teste h",
    "customerid": 10
},
{
    "vehicleid": 13,
    "name": "Nome 3",
    "brand": "Volkswagen",
    "model": "6x3",
    "class": "class3",
    "region": "Belo Horizonte",
    "customer": "Cliente de teste h",
    "customerid": 10
},
{
    "vehicleid": 12,
    "name": "Nome",
    "brand": "Volvo",
    "model": "6x3",
    "class": "class3",
    "region": "Belo Horizonte",
    "customer": "Cliente de teste h",
    "customerid": 10
}]

我需要根据我作为参数传递的过滤器创建一个树层次结构。

第一个级别始终是客户，最后一个级别始终是车辆。

例如:

1 - 如果我选择按客户过滤树，则树将按客户排序，然后客户的子级将是车辆，像这样:

[{
    "attr": {
        "type": "customer"
    },
    "text": "Cliente A",
    "children": [
        {
            "id": 1,
            "text": "Teste1",
            "attr": {
                "type": "vehicle",
                "title": "Teste1"
            }
        },
        {
            "id": 2,
            "text": "Teste3VDD",
            "attr": {
                "type": "vehicle",
                "title": "Teste3VDD"
            }
        },
        {
            "id": 3,
            "text": "Teste2VDD",
            "attr": {
                "type": "vehicle",
                "title": "Teste2VDD"
            }
        }
    ]
},
{
    "attr": {
        "type": "customer"
    },
    "text": "Novo",
    "children": [
        {
            "id": 5,
            "text": "Teste4VDD",
            "attr": {
                "type": "vehicle",
                "title": "Teste4VDD"
            }
        },
        {
            "id": 6,
            "text": "Teste5VDD",
            "attr": {
                "type": "vehicle",
                "title": "Teste5VDD"
            }
        }
    ]
},
{
    "attr": {
        "type": "customer"
    },
    "text": "Cliente3",
    "children": [
        {
            "id": 7,
            "text": "veiculo",
            "attr": {
                "type": "vehicle",
                "title": "veiculo"
            }
        },
        {
            "id": 8,
            "text": "veiculo65",
            "attr": {
                "type": "vehicle",
                "title": "veiculo65"
            }
        }
    ]
},
{
    "attr": {
        "type": "customer"
    },
    "text": "Cliente",
    "children": [
        {
            "id": 11,
            "text": "Veiculo de teste h",
            "attr": {
                "type": "vehicle",
                "title": "Veiculo de teste h"
            }
        },
        {
            "id": 12,
            "text": "Nome",
            "attr": {
                "type": "vehicle",
                "title": "Nome"
            }
        },
        {
            "id": 13,
            "text": "Nome 3",
            "attr": {
                "type": "vehicle",
                "title": "Nome 3"
            }
        }
    ]
}]

2 - 如果我选择按品牌过滤树，树将按客户排序，然后是客户的子级将是品牌，那么品牌的子代将是车辆

3 - 如果我选择按品牌和型号过滤树，则树将按客户排序，然后是客户将是品牌，那么品牌的子代将是模型，然后品牌的子代将是< strong>模型将是车辆

4 - 如果我选择按品牌、型号和“地区”过滤树，树将按客户排序，那么客户的子代将是品牌，那么品牌的子代将是模型，然后Model 的子级将是 Region，那么 Region 的子级将是 Vehicles

等等...

有人知道可以做这个吗？

提前致谢!

Answer 1

您可以使用动态方法，按给定键或具有组名称和键的对象进行分组，并通过为每个级别使用哈希表来构建嵌套结构。

function groupBy(array, keys) {
    var result = [],
        temp = { _: result };

    data.forEach(function (a) {
        keys.reduce(function (r, k, i, kk) {
            var type = typeof k === 'object' ? Object.keys(k)[0] : k,
                key = typeof k === 'object' ? a[k[type]] : a[k];

            if (!r[key]) {
                r[key] = { _: [] };
                r._.push(i + 1 < kk.length
                    ? { attr: { type: type }, text: key, children: r[key]._ }
                    : { id: a.vehicleid, text: key, attr: { type: type, title: key } }
                );
            }
            return r[key];
        }, temp);
    });

    return result;
}

var data = [{ vehicleid: 3, name: "Teste2VDD", brand: "Scania", model: "6x2", class: "class1", region: "Curitiba", customer: "Cliente A", customerid: 1 }, { vehicleid: 1, name: "Teste1", brand: "Volkswagen", model: "5x3", class: "class1", region: "Curitiba", customer: "Cliente A", customerid: 1 }, { vehicleid: 2, name: "Teste3VDD", brand: "Volkswagen", model: "6x2", class: "class2", region: "Curitiba", customer: "Cliente A", customerid: 1 }, { vehicleid: 5, name: "Teste4VDD", brand: "Scania", model: "6x4", class: "class2", region: "Curitiba", customer: "Novo", customerid: 2 }, { vehicleid: 6, name: "Teste5VDD", brand: "Scania", model: "5x5", class: "class2", region: "Curitiba", customer: "Novo", customerid: 2 }, { vehicleid: 7, name: "veiculo", brand: "Scania", model: "5x4", class: "class1", region: "Porto Alegre", customer: "Cliente3", customerid: 3 }, { vehicleid: 8, name: "veiculo65", brand: "Volkswagen", model: "5x4", class: "class3", region: "Porto Alegre", customer: "Cliente3", customerid: 3 }, { vehicleid: 11, name: "Veiculo de teste h", brand: "Scania", model: "5x3", class: "class3", region: "Belo Horizonte", customer: "Cliente de teste h", customerid: 10 }, { vehicleid: 13, name: "Nome 3", brand: "Volkswagen", model: "6x3", class: "class3", region: "Belo Horizonte", customer: "Cliente de teste h", customerid: 10 }, { vehicleid: 12, name: "Nome", brand: "Volvo", model: "6x3", class: "class3", region: "Belo Horizonte", customer: "Cliente de teste h", customerid: 10 }];

console.log(groupBy(data, ['customer', { vehicle: 'name' }]));
console.log(groupBy(data, ['brand', 'customer', { vehicle: 'name' }]));

.as-console-wrapper { max-height: 100% !important; top: 0; }