Please help me out to create treeview by javascript array. The scenario is I want to create treeview with reverse level. For Example:
var arr = [{
"ID": 1,
"Phone": "(403) 125-2552",
"City": "Coevorden",
"Name": "Grady"
}, {
"ID": 2,
"Phone": "(979) 486-1932",
"City": "Chełm",
"Name": "Scarlet"
}, {
"ID": 3,
"Phone": "(573) 685-8350",
"City": "Wardha",
"Name": "Adria"
}, {
"ID": 4,
"parentID": 3,
"Phone": "(630) 292-9737",
"City": "Villers-la-Loue",
"Name": "Xerxes"
}, {
"ID": 5,
"Phone": "(755) 968-6539",
"City": "Gönen",
"Name": "Madeson"
}, {
"ID": 6,
"parentID": 5,
"Phone": "(644) 892-5485",
"City": "Timkur",
"Name": "Rae"
}, {
"ID": 7,
"Phone": "(896) 297-6568",
"City": "Louvain-la-Neuve",
"Name": "Celeste"
}, {
"ID": 8,
"parentID": 5,
"Phone": "(168) 452-3538",
"City": "Worksop",
"Name": "Rowan"
}, {
"ID": 9,
"parentID": 5,
"Phone": "(873) 337-9560",
"City": "Bad Neuenahr-Ahrweiler",
"Name": "Kendall"
}, {
"ID": 10,
"Phone": "(450) 579-0491",
"City": "MIDdelburg",
"Name": "Madaline"
}, {
"ID": 11,
"Phone": "(111) 162-2502",
"City": "Birecik",
"Name": "Chandler"
}, {
"ID": 12,
"parentID": 8,
"Phone": "(712) 483-3905",
"City": "Courbevoie",
"Name": "Craig"
}, {
"ID": 13,
"parentID": 8,
"Phone": "(872) 499-5833",
"City": "Cuccaro Vetere",
"Name": "Basia"
}, {
"ID": 14,
"parentID": 6,
"Phone": "(724) 797-0077",
"City": "Portree",
"Name": "Elmo"
}, {
"ID": 15,
"parentID": 5,
"Phone": "(366) 967-0433",
"City": "Dublin",
"Name": "Cairo"
}, {
"ID": 16,
"parentID": 11,
"Phone": "(147) 708-7321",
"City": "Rivière-du-Loup",
"Name": "Mannix"
}, {
"ID": 17,
"Phone": "(407) 519-9894",
"City": "Roubaix",
"Name": "Justine"
}, {
"ID": 18,
"parentID": 14,
"Phone": "(938) 793-5446",
"City": "Eugene",
"Name": "Dahlia"
}, {
"ID": 19,
"parentID": 5,
"Phone": "(425) 682-2189",
"City": "Salisbury",
"Name": "Irene"
}, {
"ID": 20,
"parentID": 12,
"Phone": "(351) 187-8200",
"City": "Garaguso",
"Name": "Trevor"
}, {
"ID": 21,
"Phone": "(601) 944-5214",
"City": "Pointe-au-Pic",
"Name": "Iris"
}, {
"ID": 22,
"parentID": 20,
"Phone": "(479) 532-6127",
"City": "Salt Lake City",
"Name": "Fleur"
}, {
"ID": 23,
"parentID": 19,
"Phone": "(339) 973-1695",
"City": "Meldert",
"Name": "Hayley"
}, {
"ID": 24,
"parentID": 11,
"Phone": "(946) 766-1649",
"City": "Corral",
"Name": "Baker"
}, {
"ID": 25,
"Phone": "(964) 413-7033",
"City": "Joliet",
"Name": "Leo"
}, {
"ID": 26,
"parentID": 7,
"Phone": "(898) 476-0059",
"City": "Burntisland",
"Name": "Rigel"
}, {
"ID": 27,
"parentID": 21,
"Phone": "(163) 267-0914",
"City": "Lac Ste. Anne",
"Name": "Scarlett"
}, {
"ID": 28,
"parentID": 10,
"Phone": "(486) 637-9167",
"City": "San Maurizio Canavese",
"Name": "Wang"
}, {
"ID": 29,
"parentID": 20,
"Phone": "(268) 646-0066",
"City": "Palermo",
"Name": "Eagan"
}, {
"ID": 30,
"parentID": 2,
"Phone": "(641) 756-7073",
"City": "Harrison Hot Springs",
"Name": "Hamilton"
}, {
"ID": 31,
"parentID": 26,
"Phone": "(820) 709-1328",
"City": "Ottignies",
"Name": "Liberty"
}, {
"ID": 32,
"parentID": 12,
"Phone": "(915) 642-4154",
"City": "Bihain",
"Name": "Noel"
}, {
"ID": 33,
"parentID": 27,
"Phone": "(137) 830-3127",
"City": "Kapuskasing",
"Name": "AIDan"
}, {
"ID": 34,
"parentID": 31,
"Phone": "(594) 856-4377",
"City": "Buin",
"Name": "Murphy"
}, {
"ID": 35,
"parentID": 28,
"Phone": "(951) 871-5461",
"City": "Gold Coast",
"Name": "Ila"
}, {
"ID": 36,
"parentID": 10,
"Phone": "(781) 305-7685",
"City": "Castel Maggiore",
"Name": "Katelyn"
}, {
"ID": 37,
"parentID": 10,
"Phone": "(716) 572-8734",
"City": "Chapecó",
"Name": "Logan"
}, {
"ID": 38,
"parentID": 28,
"Phone": "(214) 619-7252",
"City": "Stargard Szczeciński",
"Name": "Adria"
}, {
"ID": 39,
"parentID": 10,
"Phone": "(422) 223-5912",
"City": "Bad Vöslau",
"Name": "Katell"
}, {
"ID": 40,
"parentID": 2,
"Phone": "(921) 336-7339",
"City": "Namur",
"Name": "Lionel"
}, {
"ID": 41,
"parentID": 28,
"Phone": "(386) 567-5819",
"City": "Borchtlombeek",
"Name": "Erin"
}, {
"ID": 42,
"parentID": 8,
"Phone": "(308) 835-2758",
"City": "Alto del Carmen",
"Name": "Austin"
}, {
"ID": 43,
"parentID": 2,
"Phone": "(410) 695-8540",
"City": "Saint-Laurent",
"Name": "Deanna"
}, {
"ID": 44,
"parentID": 4,
"Phone": "(287) 866-8953",
"City": "Fiuminata",
"Name": "Darius"
}, {
"ID": 45,
"parentID": 14,
"Phone": "(329) 372-0345",
"City": "Laurencekirk",
"Name": "Kelsey"
}, {
"ID": 46,
"parentID": 12,
"Phone": "(566) 705-6690",
"City": "Lunel",
"Name": "Skyler"
}, {
"ID": 47,
"parentID": 44,
"Phone": "(779) 411-0381",
"City": "Pontedera",
"Name": "Harding"
}, {
"ID": 48,
"parentID": 18,
"Phone": "(393) 562-0884",
"City": "WIDooie",
"Name": "Marny"
}, {
"ID": 49,
"parentID": 28,
"Phone": "(299) 937-4358",
"City": "Zamora",
"Name": "Brennan"
}, {
"ID": 50,
"parentID": 35,
"Phone": "(474) 337-2674",
"City": "Hazaribag",
"Name": "Lance"
}]
and I'm trying to create a tree view in the following order: Expected output for example:
[
{
"ID": 1,
"Phone": "(403) 125-2552",
"City": "Coevorden",
"Name": "Grady"
},
{
"ID": 2,
"Phone": "(979) 486-1932",
"City": "Chełm",
"Name": "Scarlet",
"children": [
{
"ID": 30,
"parentID": 2,
"Phone": "(641) 756-7073",
"City": "Harrison Hot Springs",
"Name": "Hamilton",
"children": [
{
"ID": 54,
"parentID": 30,
"Phone": "(800) 876-5942",
"City": "Ribnitz-Damgarten",
"Name": "Kelsie",
"children": [
{
"ID": 62,
"parentID": 54,
"Phone": "(523) 159-2911",
"City": "Biała Podlaska",
"Name": "Clio"
}
]
},
{
"ID": 87,
"parentID": 30,
"Phone": "(500) 895-9220",
"City": "Piracicaba",
"Name": "Maya"
}
]
},
{
"ID": 40,
"parentID": 2,
"Phone": "(921) 336-7339",
"City": "Namur",
"Name": "Lionel"
},
{
"ID": 43,
"parentID": 2,
"Phone": "(410) 695-8540",
"City": "Saint-Laurent",
"Name": "Deanna",
"children": [
{
"ID": 63,
"parentID": 43,
"Phone": "(475) 190-5102",
"City": "Nicoya",
"Name": "Nola"
},
{
"ID": 98,
"parentID": 43,
"Phone": "(268) 572-5059",
"City": "San Marcello Pistoiese",
"Name": "Marny"
}
]
}
]
},
{
"ID": 3,
"Phone": "(573) 685-8350",
"City": "Wardha",
"Name": "Adria",
"children": [
{
"ID": 4,
"parentID": 3,
"Phone": "(630) 292-9737",
"City": "Villers-la-Loue",
"Name": "Xerxes",
"children": [
{
"ID": 44,
"parentID": 4,
"Phone": "(287) 866-8953",
"City": "Fiuminata",
"Name": "Darius",
"children": [
{
"ID": 47,
"parentID": 44,
"Phone": "(779) 411-0381",
"City": "Pontedera",
"Name": "Harding",
"children": [
{
"ID": 92,
"parentID": 47,
"Phone": "(925) 263-0254",
"City": "Curacaví",
"Name": "Aristotle"
}
]
}
]
},
{
"ID": 56,
"parentID": 4,
"Phone": "(963) 719-2718",
"City": "Gore",
"Name": "Rafael"
}
]
},
{
"ID": 58,
"parentID": 3,
"Phone": "(464) 318-7548",
"City": "Curepto",
"Name": "Leila"
}
]
}]
I gave this output as an example. What can I do to get my data output like this?
You could take a stadard approach with a single loop, an object for collecting and dynamic keys for ID and parentID.
const
getTree = (array, root, key, parent) => array.reduce((t, o) => {
[[o[parent], {}], ['children', []]]
.reduce((o, [k, v]) => o[k] = o[k] || v, t)
.push(Object.assign(t[o[key]] = t[o[key]] || {}, o));
return t;
}, {})[root].children,
data = [{ ID: 1, Phone: "(403) 125-2552", City: "Coevorden", Name: "Grady" }, { ID: 2, Phone: "(979) 486-1932", City: "Chełm", Name: "Scarlet" }, { ID: 3, Phone: "(573) 685-8350", City: "Wardha", Name: "Adria" }, { ID: 4, parentID: 3, Phone: "(630) 292-9737", City: "Villers-la-Loue", Name: "Xerxes" }, { ID: 5, Phone: "(755) 968-6539", City: "Gönen", Name: "Madeson" }, { ID: 6, parentID: 5, Phone: "(644) 892-5485", City: "Timkur", Name: "Rae" }, { ID: 7, Phone: "(896) 297-6568", City: "Louvain-la-Neuve", Name: "Celeste" }, { ID: 8, parentID: 5, Phone: "(168) 452-3538", City: "Worksop", Name: "Rowan" }, { ID: 9, parentID: 5, Phone: "(873) 337-9560", City: "Bad Neuenahr-Ahrweiler", Name: "Kendall" }, { ID: 10, Phone: "(450) 579-0491", City: "MIDdelburg", Name: "Madaline" }, { ID: 11, Phone: "(111) 162-2502", City: "Birecik", Name: "Chandler" }, { ID: 12, parentID: 8, Phone: "(712) 483-3905", City: "Courbevoie", Name: "Craig" }, { ID: 13, parentID: 8, Phone: "(872) 499-5833", City: "Cuccaro Vetere", Name: "Basia" }, { ID: 14, parentID: 6, Phone: "(724) 797-0077", City: "Portree", Name: "Elmo" }, { ID: 15, parentID: 5, Phone: "(366) 967-0433", City: "Dublin", Name: "Cairo" }, { ID: 16, parentID: 11, Phone: "(147) 708-7321", City: "Rivière-du-Loup", Name: "Mannix" }, { ID: 17, Phone: "(407) 519-9894", City: "Roubaix", Name: "Justine" }, { ID: 18, parentID: 14, Phone: "(938) 793-5446", City: "Eugene", Name: "Dahlia" }, { ID: 19, parentID: 5, Phone: "(425) 682-2189", City: "Salisbury", Name: "Irene" }, { ID: 20, parentID: 12, Phone: "(351) 187-8200", City: "Garaguso", Name: "Trevor" }, { ID: 21, Phone: "(601) 944-5214", City: "Pointe-au-Pic", Name: "Iris" }, { ID: 22, parentID: 20, Phone: "(479) 532-6127", City: "Salt Lake City", Name: "Fleur" }, { ID: 23, parentID: 19, Phone: "(339) 973-1695", City: "Meldert", Name: "Hayley" }, { ID: 24, parentID: 11, Phone: "(946) 766-1649", City: "Corral", Name: "Baker" }, { ID: 25, Phone: "(964) 413-7033", City: "Joliet", Name: "Leo" }, { ID: 26, parentID: 7, Phone: "(898) 476-0059", City: "Burntisland", Name: "Rigel" }, { ID: 27, parentID: 21, Phone: "(163) 267-0914", City: "Lac Ste. Anne", Name: "Scarlett" }, { ID: 28, parentID: 10, Phone: "(486) 637-9167", City: "San Maurizio Canavese", Name: "Wang" }, { ID: 29, parentID: 20, Phone: "(268) 646-0066", City: "Palermo", Name: "Eagan" }, { ID: 30, parentID: 2, Phone: "(641) 756-7073", City: "Harrison Hot Springs", Name: "Hamilton" }, { ID: 31, parentID: 26, Phone: "(820) 709-1328", City: "Ottignies", Name: "Liberty" }, { ID: 32, parentID: 12, Phone: "(915) 642-4154", City: "Bihain", Name: "Noel" }, { ID: 33, parentID: 27, Phone: "(137) 830-3127", City: "Kapuskasing", Name: "AIDan" }, { ID: 34, parentID: 31, Phone: "(594) 856-4377", City: "Buin", Name: "Murphy" }, { ID: 35, parentID: 28, Phone: "(951) 871-5461", City: "Gold Coast", Name: "Ila" }, { ID: 36, parentID: 10, Phone: "(781) 305-7685", City: "Castel Maggiore", Name: "Katelyn" }, { ID: 37, parentID: 10, Phone: "(716) 572-8734", City: "Chapecó", Name: "Logan" }, { ID: 38, parentID: 28, Phone: "(214) 619-7252", City: "Stargard Szczeciński", Name: "Adria" }, { ID: 39, parentID: 10, Phone: "(422) 223-5912", City: "Bad Vöslau", Name: "Katell" }, { ID: 40, parentID: 2, Phone: "(921) 336-7339", City: "Namur", Name: "Lionel" }, { ID: 41, parentID: 28, Phone: "(386) 567-5819", City: "Borchtlombeek", Name: "Erin" }, { ID: 42, parentID: 8, Phone: "(308) 835-2758", City: "Alto del Carmen", Name: "Austin" }, { ID: 43, parentID: 2, Phone: "(410) 695-8540", City: "Saint-Laurent", Name: "Deanna" }, { ID: 44, parentID: 4, Phone: "(287) 866-8953", City: "Fiuminata", Name: "Darius" }, { ID: 45, parentID: 14, Phone: "(329) 372-0345", City: "Laurencekirk", Name: "Kelsey" }, { ID: 46, parentID: 12, Phone: "(566) 705-6690", City: "Lunel", Name: "Skyler" }, { ID: 47, parentID: 44, Phone: "(779) 411-0381", City: "Pontedera", Name: "Harding" }, { ID: 48, parentID: 18, Phone: "(393) 562-0884", City: "WIDooie", Name: "Marny" }, { ID: 49, parentID: 28, Phone: "(299) 937-4358", City: "Zamora", Name: "Brennan" }, { ID: 50, parentID: 35, Phone: "(474) 337-2674", City: "Hazaribag", Name: "Lance" }],
tree = getTree(data, undefined, 'ID', 'parentID');
console.log(tree);.as-console-wrapper { max-height: 100% !important; top: 0; }