Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2019.04.12

JavaScriptで配列から特定の文字が含まれるデータをフィルタリングする

Tags: ,,,
最終更新日:Update

配列などのデータをフロントエンド側で操作するときなどで、特定の文字が含まれるデータだけを抽出したいケースもあるかと思います。そのような場合には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": "映画鑑賞" } ] }

 


 

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

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?