ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でフラットな JSON 配列を階層ツリー構造に効率的に変換する方法

JavaScript でフラットな JSON 配列を階層ツリー構造に効率的に変換する方法

DDD
リリース: 2024-12-14 18:42:11
オリジナル
343 人が閲覧しました

How to Efficiently Transform a Flat JSON Array into a Hierarchical Tree Structure in JavaScript?

JavaScript でフラット JSON 配列から階層ツリー データ構造を構築する

複雑な JSON データを含むシナリオでは、JSON データを階層的に編成することが不可欠になります。特に木のような構造を表現する場合に最適です。この記事では、JavaScript でフラットな JSON 配列を階層ツリーに変換する方法について説明します。

問題

次の 3 つの主要なプロパティを持つオブジェクトで構成されるフラットな JSON 配列があるとします。

  • id: それぞれの一意の識別子node
  • parentId: ノードの親の識別子 (ルート ノードの場合は 0)
  • level: ツリー内のノードの深さ

タスクはこれを変換することですフラット配列を階層ツリー構造に変換し、各親ノードがその子をカプセル化します。

解決策

効率的なアプローチでは、マップ検索アルゴリズムを利用してツリーを構築します。アルゴリズムはフラット配列を 2 回繰り返します。

  1. Initialization: 各ノードの ID が配列内のインデックスに関連付けられているマップを作成します。すべてのノードの子配列を初期化します。
  2. ツリー構築: 配列を再度反復処理し、各ノードのparentId を対応する親ノードにマップします。親ノードが見つからない場合、現在のノードがルート ノードになります。

実装

次の JavaScript コード スニペットは、ツリーの実装を示しています。建物アルゴリズム:

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].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // handle dangling branches here
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}
ログイン後にコピー

使用法

フラットな JSON 配列を階層ツリー構造に変換するには:

var entries = [
    // ... entries as in the provided example
];

var tree = list_to_tree(entries);

// The resulting `tree` is the hierarchical data structure
ログイン後にコピー

結論

この記事で紹介されているアルゴリズムはフラット JSON を効果的に変換します配列を JavaScript の階層ツリー構造に変換します。マップルックアップアプローチを利用して効率的に構築するため、複雑なデータセットの処理に適しています。

以上がJavaScript でフラットな JSON 配列を階層ツリー構造に効率的に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート