JavaScriptで配列から特定の文字が含まれるデータをフィルタリングする
最終更新日: 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": "映画鑑賞" } ] }
いかがでしょうか、サーバーサイドとの連携でデータベースからの情報をフロント側で処理する場合などに使えるかと思います。ぜひ参考にしてみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories