-- Javascript

Javascript ile JSON Array içerisinde arama işlemleri

Eğer web geliştiriciliği yapıyor ya da bir API ile çalıştıysanız, JSON ile haşır neşir olmuşsunuzdur. Front-end ya da nodejs ile back-end tarafında JSONlardan oluşan bir array içinde arama yapmak istiyorsanız ECMAScript6 ile gelen find(), findIndex() ve filter() metodu sizin için çok uygun demektir.

find metodu, dizi içindeki aradığınız şartı sağlayan ilk değeri size geri döner. Eğer bir değer bulamaz ise undefined dönecektir. (MDN)

findIndex metodu, dizi içerisinde aradığınız şartı sağlayan ilk değerin index yani sırasını size dönecektir. Eğer değer bulumaz ise -1 dönecektir. (MDN)

filter metodu, dizi içerişinde aradığınız şartı sağlayan değerleri içeren yeni bir array dönecektir. Eğer şartları sağlayan bir obje bulunmaz ise boş dizi dönecektir. (MDN)

Amaç

Verilerimizin bulunduğu JSON dizisi içinden, istenen değere sahip veriyi bulmak.

Örnek

Örneğin elimizde aşağıdaki gibi bir dizi olsun. Bu dizi içerisinde kullanıcı adı Pete Lau olan kullanıcıyı bulmaya çalışalım. Bu arada merak edenler için Pete Lau kimdir?

var jsonArray  = [
  {
    ID: '199',
    Username: 'Alperen Özlü',
    Website: 'http://aozlu.com'
  },
  {
    ID: '200',
    Username: 'Larry Page',
    Website: 'http://google.com'
  },
  {
    ID: '201',
    Username: 'Pete Lau',
    Website: 'https://twitter.com/petelau2007'
  }
]

Eğer yazı boyunca anlatacağımız metodları kullanmayacak olsaydık, muhtemelen yazacağımız kod şöyle olacaktı.

var searchResult;
for(var i = 0; i < jsonArray.length ; i++){
  var current = jsonArray[i];
  if(current.Username == "Pete Lau"){
    searchResult = current;
  }
}

Fakat veri büyüdükçe ve karmaşıklaştıkça bunu yapmak gitgide zorlaşacağı için, bir de find metoduna bakalım.

 var searchResult = jsonArray.find(s=> s.Username == "Pete Lau");
 var searchResult = jsonArray.find(s=> s.Username == "Alperen Özlü" && s.ID == "199");
 var searchResult =  jsonArray.find(s=> s.Username == "John Doe");

Eğer bu dizi içerisinde aradığımız özelliğe sahip birden fazla veri var ise, ECMAScript5 ile gelen filter() metodunu kullanabiliriz.

Örneğin, websitesi bulunan kayıtları çekmek istersek aşağıdaki kodu yazabiliriz.

var searchResults = jsonArray.filter(s=> s.Website != "")

Yazının başında findIndex metodu ile ilgili de bahsettiğim için, onunla ilgili de örnek yazalım.

var searchResult = jsonArray.findIndex(s=> s.Website == "http://google.com")

Sonuç olarak,
Dizi içerisinde bir döngü başlatarak, döngünün sonucunda çıkan değeri bir değişkene atamak ya da diziye eklemek biraz eski ve zahmetli bir iş gibi duruyor. Bunun yerine yazıda bahsettiğim metodları kullanabiliriz.

Uyumluluk

Maalesef uyumluluk konusunda ufak bir problemimiz var :). find ve findIndex metodları, sadece Chrome, Firefox, Edge, Safari 7.1, Safari Mobile 8 ve Firefox Mobile tarafından destekleniyor.

Filter metodu ise modern tarayıcılar, IE9 ve üzeri destek veriyor.

Fakat geriye yönelik destek verebilmek için tarayıcılar ve nodejs için pollyfill kullanabilirsiniz. Pollyfill jsleri için bağlantılar,

  1. https://github.com/paulmillr/Array.prototype.find (tekil)
  2. https://github.com/paulmillr/Array.prototype.findIndex (tekil)
  3. https://github.com/paulmillr/es6-shim (es6 için çoğul)

Yorum Yap

Yorum

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. json = [
    {“isim”:”a”,”filmler”:”Aksiyon”},
    {“isim”:”b”,”filmler”:”Animasyon,Komedi”},
    {“isim”:”c”, “filmler”:”Aksiyon,Savaş”},
    {“isim”:”d”, “filmler”:”Komedi”}
    ]

    Buradaki sadece aksiyon dizilerinin index değerini nasıl alabilirim?

    • Merhaba,

      Öncelikle filmlerin kategorisini bu şekilde virgül ile ayırarak değil de array olarak tutmanız daha sağlıklı olabilir. Mevcut hali ile filter ile bulmak için filmler’i ‘,’ karakterine göre ayırıp indexOf ile karşılaştırma yapmanız gerekiyor.

      json.filter(s=> s.filmler.split(',').indexOf('Aksiyon') > -1)

      Eğer indexleri bulmak istiyorsanız, bunu bir döngü ile yapmanız gerekir. Foreach ya da map kullanabilirsiniz, map ile aşağıdaki gibi bir örnek işinizi görecektir.


      // Map ile tüm obje içinde dönüyoruz
      json.map((s, index)=>{
      // Objeyi virgül ile ayırıp içinde Aksiyon değerinin olup olmadığına bakıyoruz.
      if(s.filmler.split(',').indexOf('Aksiyon') > -1){
      // Varsa index değerini geri dönüyoruz.
      return index;
      }
      }).filter(m=> m !== undefined) // Bu filter koduyla, index değeri undefined dönenleri filtreliyoruz.