CODEWITHSUNDEEP
javascriptarraysreactjsfunction
Mohammad
Mohammad

Reputation: 127

change date from flat to tree

i have a mapper and i change a flat data to a tree data with my mapper.js and it works. every item in my data have a parentId and i check parentId with their id and make it to tree data. and i change my flat data to tree data with my parentId. but i have a problem with it and my problem is that my tree data is just for tow step and its not depper than 3 step

here is my flat data

 let data = [
      {
        "id": "26088812-0d3f-458b-b7e7-8ba79f63c795",
        "name": "garand father",
        "parentId": ""
      },
      {
        "id": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e",
        "name": "father 1",
        "parentId": "26088812-0d3f-458b-b7e7-8ba79f63c795"
      },
      {
        "id": "baab7121-b26b-4fee-925d-274b2153b19f",
        "name": "child 1",
        "parentId": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e"
      },
      {
        "id": "ceb26f26-f96c-49f7-a9f2-0ee61d9ada55",
        "name": "grand child 1",
        "parentId": "baab7121-b26b-4fee-925d-274b2153b19f"
      }
    ]

let newArray = maper(data, data);
newArray = newArray.filter((x) => !x.parentId);
console.log("newArray",newArray)

i use from my mapper and change it to the tree here is my mapper

mapper.js

export default function maper(data, filterData) {
  return data.map((x) => {
    let newX = {
      ...x,
      employees: filterData.filter((xfilter) => x.id === xfilter.parentId),
    };
    if (newX.employees.length === 0) {
      return newX;
    } else {
      return { ...newX, employees: maper(newX.employees, data) };
    }
  });
}

its work and i make tree data with it but i do not get grandChild 1. i mean its not go deeper than tow step.

here is my log from newArray

[
  {
    "id": "26088812-0d3f-458b-b7e7-8ba79f63c795",
    "name": "garand father",
    "parentId": "",
    "employees": [
      {
        "id": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e",
        "name": "father 1",
        "parentId": "26088812-0d3f-458b-b7e7-8ba79f63c795",
        "employees": [
          {
            "id": "baab7121-b26b-4fee-925d-274b2153b19f",
            "name": "child 1",
            "parentId": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e",
            "employees": []
          }
        ]
      }
    ]
  }
]

Upvotes: 0

Views: 66

Answers (1)

ariel
ariel

Reputation: 16150

The problem is when you process a node on data.map, some of its children may not have been processed yet. Instead, use the code from this answer:

let data = [{
    "id": "26088812-0d3f-458b-b7e7-8ba79f63c795",
    "name": "grand father",
    "parentId": ""
  }, {
    "id": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e",
    "name": "father 1",
    "parentId": "26088812-0d3f-458b-b7e7-8ba79f63c795"
  }, {
    "id": "baab7121-b26b-4fee-925d-274b2153b19f",
    "name": "child 1",
    "parentId": "161fcd9f-2345-4b60-8dd6-4c31c90ba53e"
  }, {
    "id": "ceb26f26-f96c-49f7-a9f2-0ee61d9ada55",
    "name": "grand child 1",
    "parentId": "baab7121-b26b-4fee-925d-274b2153b19f"
  }];

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].employees = []; // initialize the children
  }
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].employees.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

console.log(list_to_tree(data));

Upvotes: 4

Related Questions