Angular.js Dersler 15 - angular.forEach()

33 - angular.forEach() (helloAngular39_forEach )

http://learnkode.com/Examples/Angular/angular-foreach

To iterate each items in object or array, AngularJS has very specific function called Foreach. The Foreach function can help you to read each element using key of object or index of array. ( forEach() fonksiyonunu kullanarak bir object veya array üzerinde iterate edebiliriz. )

Example 1:

values isimli array, object'ler içerir. Bu array'in object'leri şu 2 key'e sahiptir: name ve gender. angular.foreach() method'unun aldığı 1.parametre bu array'dir. Herbir döngüde bu array'deki bir eleman ele alınır. 1. döngüde ilk object yani {name: 'Jimi', gender: 'male'} ele alınır, value bu object' refer eder. Bu object'in name ve gender property'lerine value.name ve value.gender diye erişebiliriz. Bu örnekte bir array'in elemanları üzerinde gezeceğimiz için her döngüde bir array elemanı ele alırız, dolayısıyla ortada bir key yoktur, bu örnekte key array'deki elemanın index'ini gösterir.

2.foreach'e bakalım. foreach() method'una verdiğimiz ilk parameter values[0]'dır, yani bir object'dir. Dolayısıyla her döngüde bu object'in property'leri üzerinde gezeriz, ilk döngüde ilk property'yi ele alırız : key=name, value='Jimi', 2.döngüde 2.property'yi ele alırız : key=gender, value='male' olur.

Example 2:

You can't use document.write in this fashion. It will probably just fail silently (seem to do nothing).

document.write(some object) -> ekrana düzgün yazdırılmaz. Bu document.write() method'undan kaynaklanır.document.write() kötü bir debugging aracıdır kullanma, bunun yerine console.log() kullan. Use console.log(obj) and look at your Javascript console; don't document.write, it's a poor debugging utility.

what is obj? Does it refer to the first param of angular.foreach() method? Yes. Well, as you can clearly read in the first paragraph of the forEach documentation, it is indeed!

Yukarıdaki örnekte, barsApp isimli bir module tanımladık. Sonra bu module için Venues isimli bir service object tanımladık. Birazdan VenueCtrl isimli bir controller tanımlayıp bu controller'a Venues service object'den bir instance yaratıp inject edeceğiz.

Neyse biz Venues isimli service object'i incelemeye devam edelim. Bu service object'in içerisinde Venues isimli boş bir object yarattık, sonra bu object'in içine list isimli bir array koyduk, bu array'in elemanları object'dir. list isimli array'in içerdiği herbir object'in 3 tane property'si vardır: id, name ve genres.

Sonra VenueCtrl controller'ımızın scope'unda venue isimli bir variable tanımladık, venue bu controller'a inject edilmiş olan Venues isimli instance'a refer eder.  Sonra Controller'ımızın scope'unda genreFilter isimli bir variable tanımladık. Html template'de ekrana bir selection box koyduk, bunu genreFilter'a bind ettik. selection box'dan seçilen değer genreFilter'a assign edilir. Sonra controller'ımızın scope'unda init() isimli bir fonksiyon tanımladık.

HTML sayfamızdaki şu satıra bakalım:

<div ng-app="barsApp" ng-controller="VenueCtrl" ng-init="init()"> bu satır ile, controller'ımız yüklenirken önce init() fonksiyonunu çağırırız. init() fonksiyonunda neler oluyor bakalım: Venues.list array üzerinde iterate ederiz. Herbir iteration'da bu array'in bir elemanını ele alırız, venue_elem iteration'da ele alınan array elemanına refer eder. venue_elem'in genres isimli array'i üzerinde iterate edilir, genre list array'indeki ele alınan object'in genres array'inin bir elemanına refer eder her iteration'da. Örneğin, ele alınan genre 'Rock' ise  availableGenres array'inde Rock var mı diye bakarız, varsa exists=true yapılır, böylece aynı eleman tekrar eklenmemiş olur. Bu array'de Rock yoksa, exists en içteki forEach'den false olarak çıkar sonraki if block'a girip availableGenres array'ine Rock'ı koyarız. Böylece, Venues.list array'indeki tüm object'lerin genres array'lerindeki elemanları alıp, availableGenres array'ine koyarız. Aşağıdaki kod ile select box oluştururuz. availableGenres array'indeki elemanları gösteririz select box'da, seçilen eleman genreFilter variable'a assign edilir. Bunlara ek olarak All gösterilir select box'da, bu seçilirse genreFilter'a boş string assign edilir.

<select ng-model="genreFilter" ng-options="label for label in availableGenres">

<option value="">All</option>

</select>

Aşağıdaki html kod parçasına bakalım. venue.list array'i üzerinde iterate edilir, bu array'in object elemanlarından genreFilter'ı içerenlerin (yani select box'da seçilip genreFilter'a assign edilen değeri içerenler) name property'si liste şeklinde yazılır.

<ul>

<li ng-repeat="venue in venue.list | filter:genreFilter"> <a href="">{{venue.name}}</a>

</li>

</ul>

angular.forEach(values, function (value, key, obj) {

           $scope.names.push(value.name);

       });  

foreach'in aldığı 2.parametredeki function'ın 3.parametresi olan obj, values'e yani foreach'in ilk parametresine refer eder.

Array.prototype.forEach()

forEach is such a useful method. But…how can I break the forEach loop? Well… you can't break forEach.

Aşağıda Javascript'deki foreach fonksiyonunun kullanımı gösterilmiştir. angular ve javascript'deki forEach kullanımına dikkat edelim. Javascript'deki some ve every fonksiyonlarını da öğreneceğiz.

var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];

ary.forEach(function(value, index, _ary) {

   console.log(index + ": " + value);

   return false;

});

Example:

The result should look like

1 2 3 4

0: JavaScript 1: Java 2: CoffeeScript 3: TypeScript

It's still iterating through all items in the array.

Well, dang, it sucks. What should I do if I want to stop the loop based on the condition?
It's that simple:  Don't use “forEach”. Use “some” or “every”.

Array.prototype.some

some is pretty much the same as forEach but it break when the callback returns true.

Example:

1 2 3 4 5 6

var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"]; ary.some(function (value, index, _ary) {    console.log(index + ": " + value);    return value === "CoffeeScript"; });

The result should look like

1 2 3

0: JavaScript 1: Java 2: CoffeeScript

Oh? What happened to TypeScript? Since the third iteration returned true, we successfully stopped the loop!

Array.prototype.every

every is almost identical to some except it's expecting false to break the loop.

Example:

1 2 3 4 5 6

var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"]; ary.every(function(value, index, _ary) {    console.log(index + ": " + value);    return value.indexOf("Script") > -1; });

Fiddle
The result should look like

1 2	0: JavaScript 1: Java

Since “Java” doesn't really contain “Script” in it so the callback for the iteration returned “false”. It broke the loop.

Now you can break loops whenever you want! Enjoy.