Search code examples
javascriptarraysjsonobjecttreeview

Covert a Array to a Tree Like Object (Parent child)

I have a array with this type object. -->

enter image description here

and want to show in a html tree with parent child logic

    { 
      children: [
         {
           children: [ { label : "sonali"} ],
           label: "anil",
         }
           ],
   label: "santanu"
}

or here's a image for Reference -- >

enter image description here

also i am providing a json string data (justpaste link) where i have data for reference , please parse the json to get it in js array.

json string link(justpaste)

Thanks

Solution

  • Use a Map to store location of object reference.

    let data = [{ Member_ID: 1, Member_Name: "santanu", Intro_Member_ID: 0, Intro_Member_Name: "" }, { Member_ID: 2, Member_Name: "anil", Intro_Member_ID: 1, Intro_Member_Name: "santanu" }, { Member_ID: 3, Member_Name: "antu", Intro_Member_ID: 1, Intro_Member_Name: "santanu" }, { Member_ID: 4, Member_Name: "sonali", Intro_Member_ID: 2, Intro_Member_Name: "anil" }, { Member_ID: 5, Member_Name: "debabrata", Intro_Member_ID: 3, Intro_Member_Name: "antu" }, { Member_ID: 6, Member_Name: "sankha", Intro_Member_ID: 0, Intro_Member_Name: "" }, { Member_ID: 7, Member_Name: "shraboni", Intro_Member_ID: 6, Intro_Member_Name: "sankha" }];

let map = new Map, result = [];

for (const item of data) {
    let label = item.Member_Name, node = { label },
        parentNode = map.get(item.Intro_Member_Name);

    if (parentNode) {
        parentNode.children ??= [];
        parentNode.children.push(node)
    }
    else result.push(node);
    map.set(label, node)
}
console.log(result)