Remove Object From Array Javascript By Id

Remove Object From Array Javascript By Id

5 min read Jun 20, 2024
Remove Object From Array Javascript By Id

Cara Menghapus Objek dari Array di JavaScript berdasarkan ID

Dalam pemrograman JavaScript, seringkali kita perlu memanipulasi data yang tersimpan dalam array. Salah satu operasi yang umum dilakukan adalah menghapus objek dari array berdasarkan ID.

Artikel ini akan menjelaskan cara menghapus objek dari array berdasarkan ID dengan menggunakan metode yang berbeda, seperti filter, splice, dan find.

Metode filter()

Metode filter() digunakan untuk membuat array baru yang berisi elemen-elemen yang memenuhi kondisi tertentu. Dalam kasus ini, kita akan membuat array baru yang tidak mengandung objek dengan ID yang ingin dihapus.

const data = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Pan" }
];

const idToDelete = 2;

const newData = data.filter(item => item.id !== idToDelete);

console.log(newData); 
// Output: [ { id: 1, name: "John Doe" }, { id: 3, name: "Peter Pan" } ]

Penjelasan:

  1. data adalah array yang berisi objek-objek yang ingin kita manipulasi.
  2. idToDelete adalah ID objek yang ingin kita hapus dari array.
  3. filter() membuat array baru dengan memanggil fungsi callback untuk setiap objek di data.
  4. Fungsi callback memeriksa apakah item.id sama dengan idToDelete. Jika tidak sama, objek tersebut akan dimasukkan ke dalam array baru.

Metode splice()

Metode splice() digunakan untuk menghapus dan/atau menambahkan elemen ke dalam array. Untuk menghapus objek berdasarkan ID, kita perlu mencari indeks objek terlebih dahulu.

const data = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Pan" }
];

const idToDelete = 2;

const index = data.findIndex(item => item.id === idToDelete);

if (index !== -1) {
  data.splice(index, 1);
}

console.log(data); 
// Output: [ { id: 1, name: "John Doe" }, { id: 3, name: "Peter Pan" } ]

Penjelasan:

  1. data adalah array yang berisi objek-objek yang ingin kita manipulasi.
  2. idToDelete adalah ID objek yang ingin kita hapus dari array.
  3. findIndex() digunakan untuk mencari indeks objek dengan ID yang sama dengan idToDelete.
  4. Jika index ditemukan (bernilai -1 jika tidak ditemukan), splice() menghapus satu elemen dari data pada indeks yang ditemukan.

Metode find()

Metode find() digunakan untuk mencari objek pertama yang memenuhi kondisi tertentu. Kita dapat menggunakannya untuk mencari objek dengan ID yang ingin dihapus, kemudian menghapusnya dari array dengan menggunakan splice().

const data = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Pan" }
];

const idToDelete = 2;

const itemToDelete = data.find(item => item.id === idToDelete);

if (itemToDelete) {
  const index = data.indexOf(itemToDelete);
  data.splice(index, 1);
}

console.log(data); 
// Output: [ { id: 1, name: "John Doe" }, { id: 3, name: "Peter Pan" } ]

Penjelasan:

  1. data adalah array yang berisi objek-objek yang ingin kita manipulasi.
  2. idToDelete adalah ID objek yang ingin kita hapus dari array.
  3. find() mencari objek pertama dengan item.id yang sama dengan idToDelete.
  4. Jika objek ditemukan, indexOf() digunakan untuk mencari indeks objek tersebut dalam data.
  5. splice() menghapus satu elemen dari data pada indeks yang ditemukan.

Kesimpulan

Metode filter(), splice(), dan find() dapat digunakan untuk menghapus objek dari array di JavaScript berdasarkan ID. Pilih metode yang paling sesuai dengan kebutuhan Anda. Pastikan untuk memahami cara kerja setiap metode agar dapat menggunakannya dengan benar.