Lodash を使用してオブジェクトの配列内の複数のキーをグループ化する方法

オブジェクトの配列内の複数のキーを一意の名前でグループ化する

ここでのタスクには、レンダリングを容易にするためにオブジェクトの配列を変更することが含まれます。目標は、元の配列内の実際の名前に関係なく、オブジェクトを特定のキーでグループ化することです。

次の入力配列を考えてみましょう:

const items = [
  {
    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',
  }
];

ターゲットの出力は、新しい配列を持つことです。次の構造を使用します:

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

これを実現するには、Lodash の _.map と _.groupBy の組み合わせを使用できます。関数:

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

var result = groupAndMap(items, "tab", "sections", 
                arr => groupAndMap(arr, "section", "items"));

結果変数には、目的のグループ化されたオブジェクト配列が含まれます:

console.log(result);

以上がLodash を使用してオブジェクトの配列内の複数のキーをグループ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。