Блог

Мне нужна ваша помощь или совет о том, как создать элемент дерева для проекта с данными из базы данных. У меня есть такая же таблица для преобразования в дерево.

На картинке поля CounterpartyGroupParentId, где вводится 0, указывают, и это корень дерева. Затем из следующего поля методом filter я беру CounterpartyGroupName и CounterpartyGroupId, как видно, это 10,11. Когда у нас есть идентификатор 10,11 по фильтру, я беру следующий CounterpartyGroupParentId, где также существует 10,11. Следующим шагом будет поиск элементов в CounterpartyGroupId, где 13,15 соответственно с item4,item6. Это второй слой дерева. Для третьего уровня я ищу CounterpartyGroupParentId с тем же идентификатором 13 и 15 и получаю item5, item8 для Id 13 и Item3 для 15. Следующая структура должна быть законченным деревом в DOM:

.

Я пытался реализовать это в своих проектах.

 rootarray: any[] = [];
treview_array(arr): CounterpartyGroupTree[] {
    var secondroot = [],
      roots = [];
    roots = arr.filter((x) => x.counterpartyGroupParentId == 0);
    roots.forEach((val) => {
      this.rootarray.push({
        name: val["counterpartyGroupName"],
        id: val["counterpartyGroupId"],
        children: [],
      });
    }, this);

    for (let i = 0; i < this.rootarray.length; i  ) {
      secondroot.push(
        arr.filter(
          (x) => x.counterpartyGroupParentId == this.rootarray[i]["id"]
        )
      );
    }
    let filteredarray = [...secondroot[0], ...secondroot[1]];

    filteredarray.forEach((val, index) => {
      this.rootarray[index]["children"].push({
        name: val["counterpartyGroupName"],
        id: val["counterpartyGroupId"],
        children: [],
      });
    }, this);
    var thirdroot = [];

    for (let k = 0; k < this.rootarray.length; k  ) {
      for (let l = 0; l < this.rootarray[k]["children"].length; l  ) {
        if (this.rootarray[l]["children"] != 0) {
          thirdroot.push(
            arr.filter(
              (x) =>
                x.counterpartyGroupParentId ==
                this.rootarray[l]["children"][l]["id"]
            )
          );
        }
      }
    }
    var filteredroot = [...thirdroot[0], ...thirdroot[1]];

    filteredroot.forEach((val, index) => {
      if (
        val["CounterpartyGroupParentId"] ==
        filteredarray["counterpartyGroupId"]
      ) {
        this.rootarray[index]["children"][0]["children"].push({
          name: val["counterpartyGroupName"],
          id: val["counterpartyGroupId"],
          children: [],
        });
      } else {
        this.rootarray[index]["children"][0]["children"].push({
          name: val["counterpartyGroupName"],
          id: val["counterpartyGroupId"],
          children: [],
        });
      }
    });

   console.log(this.rootarray);

    return this.rootarray;
  }
 

И интерфейс

 export interface CounterpartyGroupTree{
 name:string;
 id: number;
 children?:CounterpartyGroupTree[];

}
 

На третьем уровне у меня есть mash и трудности с вставкой выбранных данных в дерево.