Maison > interface Web > js tutoriel > Comment regrouper plusieurs clés dans un tableau d'objets à l'aide de Lodash ?

Comment regrouper plusieurs clés dans un tableau d'objets à l'aide de Lodash ?

Patricia Arquette
Libérer: 2024-12-03 03:53:09
original
981 Les gens l'ont consulté

How to Group Multiple Keys in an Array of Objects Using Lodash?

Regrouper plusieurs clés dans un tableau d'objets avec des noms uniques

La tâche à accomplir consiste à modifier un tableau d'objets pour faciliter le rendu. L'objectif est de regrouper les objets par clés spécifiques, quel que soit leur nom réel dans le tableau d'origine.

Considérez le tableau d'entrée suivant :

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',
  }
];
Copier après la connexion

Notre résultat cible est d'avoir un nouveau tableau avec la structure suivante :

const output = [
  {
    tab: 'Results',
    sections: [
      {
        section: '2017',
        items: [ { 'item that belongs here' }, { ... } ],
      },
  },
  {
    tab: 'Reports',
    sections: [
      {
        section: 'Marketing',
        items: [ { ... }, { ... } ],
      },
  },
...
]
Copier après la connexion

Pour y parvenir, nous pouvons utiliser une combinaison de _.map et _.groupBy de Lodash fonctions :

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"));
Copier après la connexion

La variable de résultat contient désormais le tableau groupé d'objets souhaité :

console.log(result);
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal