JS / VueJs / Vuetify - Create a Tree from JSON object

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...

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

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

you can use map to Restructuring data

Mars.Tsai
– Mars.Tsai

2018-11-27 11:19:32 +00:00
Commented Nov 27, 2018 at 11:19 — Mars.Tsai
– Mars.Tsai, Commented Nov 27, 2018 at 11:19
Could you give me a little more information on this please?

Dally
– Dally

2018-11-27 11:24:11 +00:00
Commented Nov 27, 2018 at 11:24 — Dally
– Dally, Commented Nov 27, 2018 at 11:24

Nina Scholz · Accepted Answer · 2018-11-27 11:52:01Z

1

You could take an array of keys for the wanted nested grouping of an object and try to find a name property with the wanted value of the level.

If found, return this item, otherwise add this item to the children property.

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

answered Nov 27, 2018 at 11:52

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dally Over a year ago

Hi Nina, I need your help again if you don't mind. Your code has worked perfectly thus far but my project has slightly changed and needs a new requirement. As you can see in the screenshot in my original question, a division, merchant and entity all have ID columns (divisonId, merchantId, entityId). I require each node to contain an id element that contains the corresponding id. I've been trying to do this all day but can't do it. Hope you can help.

Nina Scholz Over a year ago

maybe you ask a new question with an extended data set (in text form), which reflects the needed properties.

Dally Over a year ago

Hi Nina, I have done that here... stackoverflow.com/questions/55170369/…

Collectives™ on Stack Overflow

JS / VueJs / Vuetify - Create a Tree from JSON object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related