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

Answer 1

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