JS / VueJs / Vuetify - Создать дерево из объекта JSON

Question

У меня есть очень большой объект JSON, который мне нужно поместить в дерево, но я не уверен, как это сделать.Я использую VueJ с Vuetify, в который встроено Treeview, но я не знаю, как на самом деле подготовить мои данные для дерева.

Это мои данные ...

И что мне нужно, это (очевидно, не включены все данные) ...

items: [
    {
        name: "Adboom",
        children: [
            {
                name: "Jaydox LTD",
                children: [
                    {
                        name: "beautifullyyoungskin.net"
                    },
                    {
                        name: "thinbodydiet.com"
                    },
                    {
                        name: "youthfulskincare.net"
                    }
                ]
            }
        ]
    },
    {
        name: "Adult",
        children: [
            {
                name: "Occonti Ltd",
                children: [
                    {
                        name: "datinginthe.eu (3d Secure)"
                    },
                    {
                        name: "datinginthe.eu (Non-3d)"
                    },
                    {
                        name: "datinginthe.eu - ST (Non-3d)"
                    },
                    {
                        name: "datinginthe.eu ST (3d Secure)"
                    }
                ]
            }
        ]
    }
]

Answer 1

Можно взять массив ключей для требуемой вложенной группировки объекта и попытаться найти свойство name с требуемым значением уровня.

Если найдено, вернуть этот элемент, в противном случае добавитьэтот предмет в собственность детей.

var data = [{ divisionName: "Adboom", merchantName: "Jaydox LTD", entityName: "beautifullyyoungskin.net" }, { divisionName: "Adboom", merchantName: "Jaydox LTD", entityName: "thinbodydiet.com" }, { divisionName: "Adboom", merchantName: "Jaydox LTD", entityName: "youthfulskincare.net" }, { divisionName: "Adult", merchantName: "Occonti Ltd", entityName: "datinginthe.eu (3d Secure)" }, { divisionName: "Adult", merchantName: "Occonti Ltd", entityName: "datinginthe.eu (Non-3d)" }, { divisionName: "Adult", merchantName: "Occonti Ltd", entityName: "datinginthe.eu - ST (Non-3d)" }, { divisionName: "Adult", merchantName: "Occonti Ltd", entityName: "datinginthe.eu ST (3d Secure)" }],
    keys = ["divisionName", "merchantName", "entityName"],
    result = data
        .reduce((r, o) => {
            keys.reduce((t, k) => {
                var temp = (t.children = t.children || []).find(p => p.name === o[k]);
                if (!temp) {
                    t.children.push(temp = { name: o[k] });
                }
                return temp;
            }, r);
            return r;
        }, {})
        .children;

console.log(result);

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