Sunday, 8 March 2020

Teknik Grouping By Object Key di Javascript

cara mengelompokan objek berdasarkan key yang sama di javascript - halo.. pada kesempatan kali ini, saya akan memberikan tutorial singkat tentang cara grouping object berdasarkan key. Sebelum ke tutorialnya, saya akan menjelaskan tentang kegunaan grouping ini.


Apa itu grouping by obeject key?
Sebenarnya, ini adalah teknik untuk mengubah arsitektur object menjadi lebih mudah dipahami, lebih singkat, dan lebih mudah diimplementasikan di client. Salah satu contohnya adalah seperti ini.

Misal, kita memiliki object


var mobil = [

    {
        'merk': 'audi',
        'year': '2012'
    },
    {
        'merk': 'audi',
        'tahun': '2013'
    },
    {
        'merk': 'ford',
        'tahun': '2012'
    },
    {
        'merk': 'ford',
        'tahun': '2015'
    },
    {
        'merk': 'kia',
        'tahun': '2012'
    },
]


Objek tersebut terlihat terpisah satu sama lain. Misal, kita akan grouping objek tersebut berdasarkan key "merk". Jadi, mobil yang merknya sama akan tergabung dalam sebuah objek yang sama. Hasilnya akan seperti ini

var mobil = {
  'audi': [
    {
      'tahun': '2012'
    },
    {
      'tahun': '2013'
    },
  ],
  'ford': [
    {
      'tahun': '2012'
    },
    {
      'tahun': '2015'
    }
  ],
  'kia': [
    {
      'tahun': '2012'
    }
  ]
}

Ini membuat object menjadi terstruktur, mudah dilihat, dan diimplementasikan. Oke, jadi bagaimana caranya?

Saya telah memiliki kode function ajaib untuk grouping object berdasarkan key. Berikut ini kodenya

function groupBy(xs, f) {
  return xs.reduce((r, v, i, a, k = f(v)) => ((r[k] || (r[k] = [])).push(v), r), {});
}

Contoh Implementasi Kode

var mobil = [
    {
        'merk': 'audi',
        'year': '2012'
    },
    {
        'merk': 'audi',
        'tahun': '2013'
    },
    {
        'merk': 'ford',
        'tahun': '2012'
    },
    {
        'merk': 'ford',
        'tahun': '2015'
    },
    {
        'merk': 'kia',
        'tahun': '2012'
    },
]
var result = groupBy(mobil, (m) => m.merk)

Result Grouping By Merk:

{
  'audi': [
    {
      'tahun': '2012'
    },
    {
      'tahun': '2013'
    },
  ],
  'ford': [
    {
      'tahun': '2012'
    },
    {
      'tahun': '2015'
    }
  ],
  'kia': [
    {
      'tahun': '2012'
    }
  ]
}

Oke, sekian tutorial kali ini. Semoga bermanfaat! Terima Kasih!

0 komentar

Post a Comment

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!