JavaScript配列をツリー構造に変換する方法

1. 需要

バックエンドは、フロントエンドがツリー構造（重複データなし）に変換するためのデータを提供します。では、早速、どのような配列データが与えられ、どのようなツリー構造に変換されるのかを見てみましょう。

サーバーから送信された配列

定数arr = [
      [
        {"部門ID":"D019",
        "deptName":"営業部"},
        {"部門ID":"D019101",
        "deptName":"華北営業センター"}
      ],[
        {"部門ID":"D083",
        "deptName":"音楽学部"}
      ],[
        {"部門ID":"D027",
        "deptName":"杭州研究所"},
        {"部門ID":"D027048",
        "deptName":"技術エンジニアリング部門"},
        {"部門ID":"D027048002",
        "deptName":"プロジェクト管理センター"}
      ],[
        {"部門ID":"D027",
        "deptName":"杭州研究所"},
        {"部門ID":"D027048",
        "deptName":"技術エンジニアリング部門"}
      ],[
        {"部門ID":"D027",
        "deptName":"杭州研究所"},
        {"部門ID":"D027048",
        "deptName":"技術エンジニアリング部門"}
      ]
    ]

最終的に変換

定数arr = [
    {
      部門ID: 'D019',
      deptName: '営業部',
      子供たち： [{
        部門ID: 'D019101',
        部門名: '北中国営業センター',
        子供たち： []、
      }]
    },
    {
      部門ID: 'D083',
      deptName: '音楽学部',
      子供たち： []
    },
    {
      部門ID: 'D027',
      部門名: '杭州研究所'、
      子供たち： [{
        部門ID: 'D027048',
        deptName: '技術エンジニアリング部門',
        子供たち： [{
          部門ID: 'D027048002',
          deptName: 'プロジェクト管理センター',
          子供たち： []
        }]
      }]
    },
  ]

2. コード（reactHooksで開発）

定数[treeData、setTreeData] = useState([]);
  console.log(treeData); //treeData は必要な最終的なツリー構造です (ローカル ブラウザーに表示される内容は正しいです)
  
  使用効果(() => {
    : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    const arr = JSON.parse(str).flat(); //フラット化 let newArr = [];
    noRepeat(arr).length && noRepeat(arr).forEach(it => {
      子要素を追加します。
    });
  }, [])

  const noRepeat = (arr) => { //重複を削除 let newobj = {}; 
    arr.reduce((preVal, curVal) => { を返す
    newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal); 
      戻り値: 
    }, []);
  }

  const appendChild = (item, newArr) => {
    if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //すべての第1レベルの部門 newArr.push({
        部門ID: アイテム.部門ID、
        部門名: アイテム.部門名、
        子供たち： []、
      });
      新しいツリーデータを設定します。
    }それ以外 {
      他の子を追加します(項目、新しいArr);
    }
  }

  const appendOtherChild = (item, newArr) => {
    新しいArr.map(it => {
      if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) {
        it.children.push({
          部門ID: アイテム.部門ID、
          部門名: アイテム.部門名、
          子供たち： []、
        })
      }それ以外 {
        他の子を追加します(item, it.children);
      }
    });
    新しいツリーデータを設定します。
  }

要約する

これらのデータはあなたのデータと異なるかもしれませんが、ロジックはおそらくかなり近いでしょう。これらの数十行のコードをよく見てください。

JavaScript 配列をツリー構造に変換する方法についてはこれで終わりです。JavaScript 配列をツリー構造に変換する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: