Maison > interface Web > js tutoriel > Comment imbriquer un tableau d'objets en fonction de valeurs clés pour un rendu optimisé ?

Comment imbriquer un tableau d'objets en fonction de valeurs clés pour un rendu optimisé ?

DDD
Libérer: 2024-12-04 11:29:10
original
1144 Les gens l'ont consulté

How to Nest an Array of Objects Based on Key Values for Optimized Rendering?

Regroupement d'un tableau d'objets avec des clés d'imbrication

Problème :

Étant donné un tableau d'objets, la tâche est de réorganiser dans un format optimisé pour le rendu en créant des structures imbriquées basées sur une clé spécifique valeurs.

Exemple :

Tableau d'entrée :

[
  {
    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

Sortie souhaitée :

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

Solution :

Cette transformation peut être réalisée en utilisant une combinaison de fonctions lodash _.map et _.groupBy.

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

Pour imbriquer les données comme vous le souhaitez, appliquez groupAndMap de manière récursive.

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);
Copier après la connexion

Cette solution atteint l'objectif de regrouper et d'imbriquer le tableau d'objets basé sur des valeurs clés spécifiques.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal