AngularJS TIPS
配列／オブジェクトの内容を列挙するには？（forEach）
angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。
配列の要素、オブジェクトのメンバーを列挙するには、AngularJSのグローバルAPIであるangular.forEachメソッドを利用します。誤解のしようもない、シンプルなメソッドなので、さっそく、具体的な例を見てみましょう。以下は、あらかじめ用意されたメンバー情報の配列から名前を取り出し、列挙する例です。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
// メンバー情報を定義
var members = [
{
name: '山田太郎',
mail: 't_yamada@example.com',
birth: new Date(1980, 0, 5)
},
{
name: '鈴木次郎',
mail: 'j_suzuki@example.com',
birth: new Date(1978, 2, 11)
},
……中略……
];
// メンバー情報（インデックス＋名前）を列挙
angular.forEach(members, function(value, index, array) {
console.log(index + '. ' + value.name);
});
</script>
</body>
</html>
|
※サンプルコード全体はこちらからダウンロードできます。後述するリスト3の「……中略……」の部分もこちらのmembersを参考にしてください。
angular.forEachメソッドの構文は、以下の通りです。
［構文］forEachメソッド
- coll： 列挙対象の配列／オブジェクト
- callback： 配列／オブジェクトの個々の要素を処理するためのコールバック関数
JavaScript標準のforEachメソッドにも似ていますが、対象の配列／オブジェクトがnull／undefinedであった場合の挙動が異なります。ネイティブなforEachメソッドでは例外となるのに対して、angular.forEachメソッドは渡された値をそのまま返します。
引数collに配列を渡した場合、コールバック関数（＝引数callback）の引数には、以下のような値が渡されます。
- value： 現在の要素値
- index： 現在のインデックス値
- array： 処理対象の配列そのもの
サンプルでは、ここからインデックス（index）と値（value）のnameプロパティをコンソールに出力しています。
オブジェクトのメンバーを列挙する
同じ要領でオブジェクトのメンバーを列挙することもできます。
|
var member = {
name: '山田太郎',
mail: 't_yamada@example.com',
birth: new Date(1980, 0, 5)
}
// 変数memberのプロパティ情報を列挙
angular.forEach(member, function(value, prop, obj) {
console.log(prop + '：' + value);
});
|
引数collに配列ではなくオブジェクトを渡した場合、コールバック関数に渡される引数は、それぞれ以下のようになります。
- value： プロパティ値
- prop： プロパティ名
- obj： 処理対象のオブジェクトそのもの
thisを固定する
forEachメソッドの第3引数として、任意のオブジェクトを指定することで、コールバック関数の配下でthisが示す先を固定することもできます。例えば以下は、メンバー情報の配列から名前だけを取り出し、新たな配列dataに格納する例です。
|
var members = [
{
name: '山田太郎',
mail: 't_yamada@example.com',
birth: new Date(1980, 0, 5)
},
……中略……
];
// 空の配列を準備
var data = [];
// 配列membersの内容を配列dataに詰め替え
angular.forEach(members, function(value, index, array) {
this.push(value.name);
}, data);
// 配列dataの内容を出力
console.log(data);
|
ポイントとなるのは太字の部分です。forEachメソッドの第3引数で配列dataを指定していますので、コールバック関数配下でのthisはdataとなります。よって、「data.push」は「this.push」と書けます。
API：angular.forEach カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第37回～第41回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
37. JSON形式のWeb APIにアクセスするには？（$http）
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。
38. 指定された時間の経過で処理を実行するには？（$interval／$timeout）
ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。
39. 【現在、表示中】≫ 配列／オブジェクトの内容を列挙するには？（forEach）
angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。
40. クッキーを読み書きするには？（$cookies）
AngularJSが提供する機能を利用してクッキーを読み／書き／削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
41. $cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
