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)