配列などのデータをフロントエンド側で操作するときなどで、特定の文字が含まれるデータだけを抽出したいケースもあるかと思います。そのような場合にはjavascriptのfilter()関数がとても便利です。

今回はサンプルにこのような配列に入ったデータを使います。直接データを定数に入れていますが、外部ファイルやAPIから返ってくるJSONデータでも同じですね。

const array = [
 { "name": "鈴木", "sex": "男性", "hobbyList": [ { "hobby": "釣り" }, { "hobby": "映画鑑賞" }, { "hobby": "ドライブ" } ] },
 { "name": "田中", "sex": "女性", "hobbyList": [ { "hobby": "料理" }, { "hobby": "ランニング" }, { "hobby": "買い物" } ] },
 { "name": "山崎", "sex": "男性", "hobbyList": [ { "hobby": "スポーツ" }, { "hobby": "ドライブ" }, { "hobby": "読書" } ] },
 { "name": "小林", "sex": "女性", "hobbyList": [ { "hobby": "ヨガ" }, { "hobby": "映画鑑賞" }, { "hobby": "買い物" } ] },
 { "name": "川原", "sex": "男性", "hobbyList": [ { "hobby": "料理" }, { "hobby": "写真" }, { "hobby": "映画鑑賞" } ] }
]

実際にこのデータを特定の文字列でフィルタリングしていきます。まずはデータの入った配列にfilter()関数を使います。そしてコールバックに文字列が含まれるかの条件分岐を行います。

【javascript（ES6）】

const result = array.filter(value => {
 if(value.sex.indexOf('男性')!== -1) {
  return value
 }
});
console.log('「男性」の値が含まれるデータ',result);

文字列が含まれるキーにindexOf()関数を使うと含まれるデータの数の値が返ってきます。含まれない場合には「-1」が返ってくるので、それ以外の条件にすることで文字列が含まれる条件に等しくなります。そしてフィルタリングされた値をreturnで返します。実際にデータを確認するとこのような内容になっているかと思います。

【console】

{ "name": "鈴木", "sex": "男性", "hobbyList": [ { "hobby": "釣り" }, { "hobby": "映画鑑賞" }, { "hobby": "ドライブ" } ] },
{ "name": "山崎", "sex": "男性", "hobbyList": [ { "hobby": "スポーツ" }, { "hobby": "ドライブ" }, { "hobby": "読書" } ] },
{ "name": "川原", "sex": "男性", "hobbyList": [ { "hobby": "料理" }, { "hobby": "写真" }, { "hobby": "映画鑑賞" } ] }

2次元配列のデータに対してフィルタリングを行う場合には、対象のインデックスが含まれているキーに対してforEach()関数などで繰り返していきます。あとは同じく文字列が含まれるキーにindexOf()関数を使う形になります。ここでは空の配列を用意して、そこにフィルタリングされた値を入れています。

【javascript（ES6）】

const result = [];
array.filter(value => {
 value.hobbyList.forEach(key => {
  if(key.hobby.indexOf('料理')!== -1) {
   result.push(value);
  }
 });
});
console.log('「料理」の値が含まれるデータ',result);

コンソールなどでデータを確認するとこのようにフィルタリングできているのがわかります。

【console】

{ "name": "田中", "sex": "女性", "hobbyList": [ { "hobby": "料理" }, { "hobby": "ランニング" }, { "hobby": "買い物" } ] },
{ "name": "川原", "sex": "男性", "hobbyList": [ { "hobby": "料理" }, { "hobby": "写真" }, { "hobby": "映画鑑賞" } ] }

いかがでしょうか、サーバーサイドとの連携でデータベースからの情報をフロント側で処理する場合などに使えるかと思います。ぜひ参考にしてみてはいかがでしょうか。