0%

Programmingプログラミングナレッジ

Posted:2019.04.12

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

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】