Wie verschachtelt man ein Array von Objekten basierend auf Schlüsselwerten für ein optimiertes Rendering?

Array von Objekten mit Verschachtelungsschlüsseln gruppieren

Problem:

Bei einem Array von Objekten besteht die Aufgabe darin, es neu zu organisieren Sie können sie in ein für das Rendern optimiertes Format umwandeln, indem Sie verschachtelte Strukturen basierend auf einem bestimmten Schlüssel erstellen Werte.

Beispiel:

Eingabearray:

[
  {
    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',
  }
]

Gewünschte Ausgabe:

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

Lösung :

Diese Transformation kann mithilfe einer Kombination von Lodash-Funktionen erreicht werden _.map und _.groupBy.

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

Um die Daten wie gewünscht zu verschachteln, wenden Sie „groupAndMap“ rekursiv an.

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

Diese Lösung erreicht das Ziel, das Array von Objekten zu gruppieren und zu verschachteln basierend auf bestimmten Schlüsselwerten.

Das obige ist der detaillierte Inhalt vonWie verschachtelt man ein Array von Objekten basierend auf Schlüsselwerten für ein optimiertes Rendering?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!