Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menyarangkan Tatasusunan Objek Berdasarkan Nilai Utama untuk Paparan Dioptimumkan?

Bagaimana untuk Menyarangkan Tatasusunan Objek Berdasarkan Nilai Utama untuk Paparan Dioptimumkan?

DDD
Lepaskan: 2024-12-04 11:29:10
asal
1141 orang telah melayarinya

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

Mengumpulkan Tatasusunan Objek dengan Kekunci Bersarang

Masalah:

Memandangkan pelbagai objek, tugasnya adalah untuk menyusun semula mereka ke dalam format yang dioptimumkan untuk pemaparan dengan mencipta struktur bersarang berdasarkan kunci tertentu nilai.

Contoh:

Susun Input:

[
  {
    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',
  }
]
Salin selepas log masuk

Output yang Diingini:

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

Penyelesaian :

Transformasi ini boleh dicapai menggunakan gabungan fungsi lodash _.map dan _.groupBy.

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

Untuk menyarangkan data seperti yang dikehendaki, gunakan groupAndMap secara rekursif.

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);
Salin selepas log masuk

Penyelesaian ini mencapai objektif mengumpulkan dan menyarangkan tatasusunan objek berdasarkan nilai kunci tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Menyarangkan Tatasusunan Objek Berdasarkan Nilai Utama untuk Paparan Dioptimumkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan