Create a JSON hierarchical tree from MySQL/JSON data

Question

I have a very large JSON object that I need to get into a tree but I'm unsure on how to do it. I'm using VueJs with Vuetify which has Treeview built in but I don't know how to actually get my data ready for the tree.

This is my data... https://tpcrm.totalprocessing.com/api/get-channels

And what I need is this (obviously haven't included all the data)

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"
                    }
                ]
            }
        ]
    }
]

Nina Scholz · Accepted Answer · 2019-03-14 19:40:31Z

By using the same pattern for name and id, you could use an array of key parts and look for the id and group by it.

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

I have no idea how that works but it works flawlessly Nina. Thank you so much. I'm trying to break the code down and understand how it works but I'm struggling here.

Collectives™ on Stack Overflow

Create a JSON hierarchical tree from MySQL/JSON data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related