Javascript İle Dinamik Veri Filtreleme Nasıl Yapılır?

JavaScript ile Dinamik Veri Filtreleme Nasıl Yapılır?

Modern web uygulamalarında kullanıcı deneyimini iyileştiren en temel özelliklerden biri, büyük veri kümeleri üzerinde anlık arama ve filtreleme yapabilmektir. JavaScript ile dinamik veri filtreleme, sunucuya her seferinde istek göndermek yerine, tarayıcı tarafında (client-side) verileri işleyerek uygulamayı çok daha hızlı ve akıcı hale getirmenizi sağlar. Bu rehberde, modern ECMAScript standartlarını kullanarak, bir ürün listesini kullanıcı girdisine göre nasıl filtreleyeceğinizi adım adım öğreneceksiniz.

Bu eğitim, JavaScript temellerine hakim olan ancak DOM (Document Object Model) manipülasyonu ve dizi metodları ile veri işleme süreçlerini pratik bir projede birleştirmek isteyen geliştiriciler için hazırlanmıştır. Rehberin sonunda, kendi projelerinizde kullanabileceğiniz ölçeklenebilir bir filtreleme mantığına sahip olacaksınız.

Ön Hazırlık ve Gereksinimler

Dinamik bir filtreleme sistemi oluşturmak için karmaşık araçlara ihtiyacınız yoktur. Modern tarayıcıların desteklediği standart JavaScript (ES6+), HTML5 ve CSS3 yeterlidir. Çalışmalarınızı gerçekleştirmek için güncel bir kod editörü (VS Code önerilir) ve tarayıcı geliştirici araçlarını (DevTools) kullanmanız yeterlidir.

• Modern bir web tarayıcısı (Chrome, Firefox veya Edge).
• Temel HTML yapısı hakkında bilgi.
• Dizi (Array) metodları (filter, map, includes) hakkında temel seviyede hakimiyet.
• Projenizi test etmek için basit bir yerel sunucu (Live Server eklentisi önerilir).

Adım 1: Veri Setini Hazırlama ve HTML Yapısı

Filtreleme işleminin ilk adımı, üzerinde işlem yapacağımız veriyi tanımlamak ve bu veriyi ekrana yansıtacak HTML yapısını kurmaktır. Verilerimizi genellikle bir dizi nesne (Array of Objects) olarak tutarız.

// Veri setimizi tanımlıyoruz
const urunler = [
  { id: 1, isim: "Laptop", kategori: "Elektronik" },
  { id: 2, isim: "Telefon", kategori: "Elektronik" },
  { id: 3, isim: "Masa", kategori: "Mobilya" },
  { id: 4, isim: "Sandalye", kategori: "Mobilya" }
];

Bu veri yapısı, her bir öğenin kendine has özelliklerini taşır. HTML kısmında ise bir arama kutusu ve bu sonuçların listeleneceği bir alan oluşturmalıyız.

Adım 2: JavaScript ile Dinamik Filtreleme Mantığı

Filtreleme işleminin kalbi filter() metodudur. Kullanıcı klavyeden bir tuşa bastığında (input event), mevcut listeyi yeni kriterlere göre daraltırız. Aşağıdaki kod, girilen metni ürün isimleriyle karşılaştırır.

const aramaKutusu = document.getElementById('aramaKutusu');

aramaKutusu.addEventListener('input', (e) => {
  const arananDeger = e.target.value.toLowerCase();
  
  const filtrelenmisUrunler = urunler.filter(urun => 
    urun.isim.toLowerCase().includes(arananDeger)
  );
  
  listeyiGuncelle(filtrelenmisUrunler);
});

Burada toLowerCase() kullanarak büyük/küçük harf duyarlılığını ortadan kaldırıyoruz. includes() metodu ise girilen ifadenin ürün isminin içinde geçip geçmediğini kontrol eder.

Adım 3: DOM Manipülasyonu ile Arayüzü Güncelleme

Filtrelenen veriyi kullanıcıya göstermek için DOM'u temizleyip yeniden oluşturmamız gerekir. Bu işlem, performansı korumak adına verimli bir şekilde yapılmalıdır.

function listeyiGuncelle(veri) {
  const listeAlani = document.getElementById('listeAlani');
  listeAlani.innerHTML = ''; // Önceki listeyi temizle
  
  veri.forEach(urun => {
    const li = document.createElement('li');
    li.textContent = urun.isim;
    listeAlani.appendChild(li);
  });
}

Bu fonksiyon, her filtreleme adımında arayüzü güncel tutar. innerHTML = '' kullanımı basit projeler için yeterlidir ancak çok büyük listelerde sanal DOM veya daha gelişmiş DOM parçaları (DocumentFragment) kullanılmalıdır.

Adım 4: Çoklu Kriter ile Filtreleme

Gerçek dünya uygulamalarında sadece isim değil, kategori veya fiyat gibi birden fazla kritere göre filtreleme yapmanız gerekebilir. Bunun için filtreleme mantığını genişletmeliyiz.

function cokluFiltrele(metin, kategori) {
  return urunler.filter(urun => {
    const isimUyumu = urun.isim.toLowerCase().includes(metin.toLowerCase());
    const kategoriUyumu = kategori === 'Hepsi' || urun.kategori === kategori;
    return isimUyumu && kategoriUyumu;
  });
}

Bu yaklaşım, kullanıcıya hem arama kutusu hem de kategori seçimi (dropdown) sunarak daha detaylı bir arama deneyimi sağlar.

Güvenlik Uyarısı: Kullanıcıdan alınan verileri doğrudan DOM'a eklerken innerHTML yerine textContent kullanmaya özen gösterin. Aksi takdirde, zararlı kodların çalıştırılmasına neden olabilecek XSS (Cross-Site Scripting) saldırılarına açık hale gelebilirsiniz.

Filtreleme Yöntemlerinin Karşılaştırılması

Adım 5: Performans Optimizasyonu (Debounce Kullanımı)

Kullanıcı her tuşa bastığında filtreleme fonksiyonunu çalıştırmak, özellikle veri seti büyükse tarayıcıyı yorabilir. "Debounce" tekniği, kullanıcının yazmayı bırakmasını beklemenizi sağlar.

function debounce(func, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const optimizeFiltrele = debounce((deger) => {
  console.log("Filtreleniyor:", deger);
  // Filtreleme mantığı buraya
}, 300);

300 milisaniyelik bir gecikme, kullanıcı deneyimini bozmadan işlemci üzerindeki yükü önemli ölçüde azaltır.

Sıkça Sorulan Sorular

Filtreleme yaparken büyük/küçük harf sorununu nasıl çözerim?

Hem aranan metni hem de veri setindeki ilgili alanı toLowerCase() veya toUpperCase() metodları ile standart bir formata getirerek karşılaştırmalısınız.

Çok büyük veri setlerinde ne yapmalıyım?

Veri seti binlerce satırdan oluşuyorsa, istemci tarafında filtreleme yerine sunucu tarafında (backend) "pagination" (sayfalandırma) ve veritabanı sorguları ile filtreleme yapılması önerilir.

Boş sonuç durumunda kullanıcıyı nasıl bilgilendiririm?

Filtrelenmiş dizi boşsa (length === 0), DOM üzerinde "Sonuç bulunamadı" şeklinde bir mesaj gösteren bir koşul bloğu ekleyebilirsiniz.

Filtreleme sırasında neden sayfa yenileniyor?

Eğer bir form elementi kullanıyorsanız, formun varsayılan submit davranışını event.preventDefault() ile engellemeniz gerekir.

Debounce neden gereklidir?

Kullanıcı her karakter girdiğinde DOM'u yeniden oluşturmak, tarayıcının render performansını düşürür. Debounce, işlemi belirli bir süre erteleyerek sadece son girdinin işlenmesini sağlar.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanırken, kullanıcı girdilerini mutlaka doğrulayın ve XSS saldırılarına karşı gerekli güvenlik önlemlerini aldığınızdan emin olun.

İleri Seviye Filtreleme: Regex ve Kısmi Eşleşme Teknikleri

Temel filtreleme işlemleri genellikle includes() metodu ile çözülse de, kullanıcı deneyimini iyileştirmek için daha esnek arama yöntemlerine ihtiyaç duyabilirsiniz. Özellikle kullanıcıların yazım hatalarını tolere eden veya kelimelerin sadece başlangıç kısımlarına göre sonuç getiren yapılar, arama kalitesini artırır.

Düzenli ifadeler (Regex), bu noktada devreye girerek daha karmaşık sorguları tek satırda yönetmenize olanak tanır. Aşağıdaki örnek, kullanıcının girdiği metni dinamik bir Regex nesnesine dönüştürerek filtreleme yapar:

function filterWithRegex(data, query) {
  const regex = new RegExp(query, 'i'); // 'i' bayrağı büyük/küçük harf duyarsızlığı sağlar
  return data.filter(item => regex.test(item.name));
}

const products = [{name: 'Laptop'}, {name: 'Mouse'}, {name: 'Monitör'}];
console.log(filterWithRegex(products, 'mo')); // Hem 'Mouse' hem 'Monitör' döner

Filtreleme İşlemlerinde Hata Ayıklama ve İzleme

Dinamik filtreleme süreçlerinde en sık karşılaşılan sorunlar, veri setinin beklenmedik şekilde undefined veya null değerler içermesidir. Filtreleme mantığınızı kurarken, verinin tipini kontrol etmek ve hata payını minimize etmek için şu adımları izleyebilirsiniz:

• Veri Doğrulama: Filtreleme fonksiyonuna giren verinin bir dizi olup olmadığını Array.isArray() ile kontrol edin.
• Güvenli Erişim: Nesne içindeki özelliklere erişirken opsiyonel zincirleme (optional chaining - ?.) operatörünü kullanın.
• Konsol Loglama: Filtreleme anında kaç sonucun döndüğünü izlemek için console.table() kullanarak sonuçları görselleştirin.

function safeFilter(data, query) {
  if (!Array.isArray(data)) return [];
  
  return data.filter(item => {
    const value = item?.name?.toLowerCase() || '';
    return value.includes(query.toLowerCase());
  });
}

Alternatif Yaklaşım: Kütüphane Kullanımı (Fuse.js)

Eğer uygulamanızda "bulanık arama" (fuzzy search) gibi gelişmiş özelliklere ihtiyaç duyuyorsanız, kendi filtreleme mantığınızı yazmak yerine Fuse.js gibi hafif ve güçlü kütüphaneleri tercih edebilirsiniz. Bu kütüphaneler, kullanıcı yanlış yazsa bile en yakın eşleşmeleri bulma konusunda oldukça başarılıdır.

Kütüphane kullanımı, özellikle e-ticaret siteleri gibi kullanıcıların ürün isimlerini tam hatırlayamadığı senaryolarda dönüşüm oranlarını doğrudan etkileyen bir iyileştirmedir.

Sonuç

JavaScript ile dinamik veri filtreleme, kullanıcı etkileşimini artıran ve uygulamayı daha profesyonel kılan temel bir beceridir. Bu rehberde öğrendiğiniz filter() metodunu, DOM manipülasyonu ve debounce tekniği ile birleştirerek performanslı filtreleme sistemleri kurabilirsiniz. Bir sonraki adım olarak, bu verileri bir API üzerinden çekmeyi ve filtreleme mantığını asenkron (async/await) yapılarla entegre etmeyi deneyebilirsiniz.