Remove List Object Berdasarkan Array Pada Jquery

Dari Judul di atas kita akan membayangkan bahwa akan ada proses membandingkan value dari item object dengan value yang ada di array. Yang telah kita tahu object yang dimaksud merupakan sebuah array namun dalam array tersebut mengandung array lain atau bisa dikatakan adalah sebuah list. Object =[ { ID: "1", Name: "AgungPanduan.com” }, { ID: "2", Name: "e-pandu.com” }].

Penggunaan list Object ini biasa digunakan saat kita akan menampung data dari database. Dan kemudian kita akan menghapus (remove) beberapa baris pada Array Object berdasarkan key atau kata kunci misalkan item.ID atau item.Name. Agar mempermudah anda memahami apa yang saya maksud, kita langsung saja ke Langkah-langkahnya adalah sebagai berikut;

Langkah 1

Buat HTML seperti di bawah ini,


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>

<p>Click the button to find and remove object by array to get a new object</p>
<button onclick="myFunction()">Try it</button>
<p>Array: <span id="demo1"></span></p>
<p>Key: <span id="demo2"></span></p>
<p>New array: <span id="demo3"></span></p>

<script>

</script>

</body>
</html>

Langkah 2

Tambahkan Object Array pada <script>

var myArray = [
 {id:1, name:"AgungPanduan.Com"},
 {id:2, name:"E-Pandu.com"},
 {id:3, name:"Test Test Saja"},
]

Langkah 3

Buat Function untuk mencari (find) baris dengan item.ID ([key]) mana yang sesuai dengan Array pembanding (yang akan dicari). Array akan dihapus menggunakan splice. Jika ingin hanya menampilkan data yang sama cukup ganti array.splice(i,1) dengan return array[i].

function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
    array.splice(i,1);
        }
    }
    return null;
}

Langkah 4

Membuat myFunction() yang merupakan function yang dipanggil oleh <button onclick>. Di dalam ada var key2 yang merupakan kata kunci yang akan dicari pada list Object, var New Object untuk menampung Array baru terbentuk. Gunakan looping for jika key2 terdiri banyak kata kunci.

function myFunction(){
 $('#demo1').text(JSON.stringify(myArray));
 var key2 =[3];
 var NewObject =[];
 
 for(var i=0;i<key2.length;i++){
  objectFindByKey(myArray,'id',key2[i] )
 }
 NewObject = myArray;
 $('#demo2').text(JSON.stringify(key2));
 $('#demo3').text(JSON.stringify(NewObject));
}

Langkah 5

Sekarang simpanlah kode script yang sudah lengkap menjadi file html, lalu anda jalankan menggunakan browser yang anda install sebelumnya. Berikut ini script lengkapnya,


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>

<p>Click the button to find and remove object by array to get a new object</p>
<button onclick="myFunction()">Try it</button>
<p>Array: <span id="demo1"></span></p>
<p>Key: <span id="demo2"></span></p>
<p>New array: <span id="demo3"></span></p>
<script>
var myArray = [
 {id:1, name:"AgungPanduan.Com"},
 {id:2, name:"E-Pandu.com"},
 {id:3, name:"Test Test Saja"},
]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
   array.splice(i,1);
        }
    }
    return null;
}

function myFunction(){
 $('#demo1').text(JSON.stringify(myArray));
 var key2 =[3];
 var NewObject =[];
 
 for(var i=0;i<key2.length;i++){
  objectFindByKey(myArray,'id',key2[i] )
 }
 NewObject = myArray;
 $('#demo2').text(JSON.stringify(key2));
 $('#demo3').text(JSON.stringify(NewObject));
}
</script>
</body>
</html>

Programming