javascript - 从 MySQL/JSON 数据创建 JSON 层次树

Question

我有一个非常大的 JSON 对象，我需要将其放入树中，但我不确定如何做到这一点。我正在使用 VueJs 和 Vuetify，它内置了 Treeview，但我不知道如何实际为树准备好数据。

这是我的数据... https://tpcrm.totalprocessing.com/api/get-channels

我需要的是这个(显然没有包含所有数据)

items: [
    {
        name: "Adboom",
        id: "8ac9a4cb64b143910164b1b2ab0305db"
        children: [
            {
                name: "Jaydox LTD",
                id: "8ac9a4cb64b143910164b1b3009b05e2"
                children: [
                    {
                        name: "beautifullyyoungskin.net"
                        id: "8ac9a4cb64b143910164b1b8004b063a"
                    },
                    {
                        name: "thinbodydiet.com"
                        id: "8ac9a4cb64b143910164b1b74af10630"
                    },
                    {
                        name: "youthfulskincare.net"
                        id: "8ac9a4cb64b143910164b1b77ba70634"
                    }
                ]
            }
        ]
    },
    {
        name: "Adult",
        id: "8ac9a4c96489324601649354068034ab"
        children: [
            {
                name: "Occonti Ltd",
                id: "8ac9a4c965a8666d0165af279ca228dd"
                children: [
                    {
                        name: "datinginthe.eu (3d Secure)"
                        id: "8ac9a4cd65a866700165b47a25c74e61"
                    },
                    {
                        name: "datinginthe.eu (Non-3d)"
                        id: "8ac9a4cd65a866700165b478f0574e48"
                    },
                    {
                        name: "datinginthe.eu - ST (Non-3d)"
                        id: "8ac9a4ca65a8a0670165d34366d53fc9"
                    },
                    {
                        name: "datinginthe.eu ST (3d Secure)"
                        id: "8ac9a4cb66aafd790166ad040a170b68"
                    }
                ]
            }
        ]
    }
]

Answer 1

通过对 name 和 id 使用相同的模式，您可以使用关键部分数组并通过它查找 id 和分组。

var data = [{ divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "beautifullyyoungskin.net", entityId: '500' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "thinbodydiet.com", entityId: '501' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "youthfulskincare.net", entityId: '502' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (3d Secure)", entityId: '503' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (Non-3d)", entityId: '504' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu - ST (Non-3d)", entityId: '505' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu ST (3d Secure)", entityId: '506' }],
    keys = ["division", "merchant", "entity"],
    result = data
        .reduce((r, o) => {
            keys.reduce((t, k) => {
                var temp = (t.children = t.children || []).find(p => p.id === o[k + 'Id']);
                if (!temp) {
                    t.children.push(temp = { name: o[k + 'Name'], id: o[k + 'Id'] });
                }
                return temp;
            }, r);
            return r;
        }, {})
        .children;

console.log(result);

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