最適化されたレンダリングのためにキー値に基づいてオブジェクトの配列をネストする方法

ネストキーを使用したオブジェクトの配列のグループ化

問題:

オブジェクトの配列が与えられた場合、タスクは再編成することです特定のキーに基づいてネストされた構造を作成することで、レンダリングに最適化された形式に変換します。

例:

入力配列:

[
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
  {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
  {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  }
]

必要な出力:

[
  {
    tab: 'Results',
    sections: [
      {
        section: '2017',
        items: [
          { 'item that belongs here' },
          { ... }
        ]
      }
    ]
  },
  {
    tab: 'Reports',
    sections: [
      {
        section: 'Marketing',
        items: [
          { ... },
          { ... }
        ]
      }
    ]
  }
]

ソリューション:

この変換は達成できますlodash 関数 _.map と _.groupBy を組み合わせて使用​​します。

function groupAndMap(items, itemKey, childKey, predic) {
  return _.map(_.groupBy(items, itemKey), (obj, key) => ({
    [itemKey]: key,
    [childKey]: (predic && predic(obj)) || obj
  }));
}

必要に応じてデータをネストするには、groupAndMap を再帰的に適用します。

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);

このソリューションは、グループ化の目的を達成します。特定のキー値に基づいてオブジェクトの配列をネストします。

以上が最適化されたレンダリングのためにキー値に基づいてオブジェクトの配列をネストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。