配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。
今回操作する配列には、このようにオブジェクトが格納されているとします。
それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。
const gallery = {
"list": [
{
"id": 1,
"img": "photo01",
"date": "2020/02/20",
"group": "other"
},
{
"id": 2,
"img": "photo02",
"date": "2019/02/12",
"group": "cat"
},
{
"id": 3,
"img": "photo03",
"date": "2020/02/13",
"group": "bird"
},
{
"id": 4,
"img": "photo04",
"date": "2021/08/10",
"group": "fish"
},
{
"id": 5,
"img": "photo05",
"date": "2020/08/23",
"group": "bird"
},
{
"id": 6,
"img": "photo06",
"date": "2021/03/13",
"group": "dog"
},
{
"id": 7,
"img": "photo07",
"date": "2021/10/08",
"group": "bird"
},
{
"id": 8,
"img": "photo08",
"date": "2020/09/14",
"group": "cat"
},
{
"id": 9,
"img": "photo09",
"date": "2019/01/20",
"group": "cat"
},
{
"id": 10,
"img": "photo10",
"date": "2020/03/20",
"group": "fish"
}
]
}特定のキーの値を含むオブジェクトを抽出する（filter）
arrayのfilterメソッドはこのように使います。条件式に合致する値で新しい配列を作成します。
以下は、配列から3より大きな値を取り出して新しい配列を作成しています。
const arry = [1, 2, 3, 4, 5, 6, 7];
const filterAry = arry.filter(function(v, i, arry) { //v=要素、i=インデックス,arry=配列
return v >= 3; //3より大きい数の要素を抽出
});
console.log(filterAry);
//結果
[3,4,5,6,7]配列の要素がオブジェクトの場合、対象のキーの値が合致するものを条件式に設定します。
以下コードでは、キー[group]の値が”cat”のオブジェクトだけを抽出しています。
See the Pen javascript-filter by donguri2020 (@m-ke) on CodePen.
filter関数の箇所を抜き出したのが次のコードです。itemにはそれぞれのオブジェクトが格納されています。
const result = gallery.list.filter((item) => {
const genreA = item.group === "cat" ? true : false;
if (genreA) {
return item;
}
});特定のキーの値でオブジェクトをソートする（sort）
arrayのsortメソッドはこのように使います。
結果を確認すると昇順に並んでいることが確認できます。降順にしたい場合、大なりと小なり記号を逆にします。構文みたいなものなので、このまま覚えます。。
const arry = [5, 8, 1, 4, 2, 6, 3, 7];
const sortAry = arry.sort(function(a, b){
if (a > b) return 1;
if (a < b) return -1;
return 0;
});
console.log(sortAry);
//結果
[1,2,3,4,5,6,7,8]配列の要素がオブジェクトで、そのキーの値を基準にソートしたい場合、基準にしたいキーを次のように指定します。
以下コードでは、キー2024/11/21の値を基準に配列の要素（オブジェクト）を並び替えます。
See the Pen javascript-sort by donguri2020 (@m-ke) on CodePen.
sort関数の箇所を抜き出したのが次のコードです。引数a、bにはそれぞれのオブジェクトが格納されています。
const result=gallery.list.sort(function(a, b){
if (a["date"] > b["date"]) return 1;
if (a["date"] < b["date"]) return -1;
return 0;
});fileter、sort関数を使って画像を並び替えるサンプル
せっかくなので、filter、sort関数を使って画像を並び替えるサンプルを作ってみました。
外部ファイルjsonで読み込んだデータをもとに画像を表示させます。今回は生き物の写真を集めてそれっぽいサンプルを作りました。
id順、投稿日順、種類ごとにソートが可能です。また生き物の種類ごとに写真を表示することができます。どこかで使える、、かもしれないです。
実際の動作はこちらでご確認ください！（別ウィンドウが開きます）
長いコードなのでポイントだけメモしておきます。
HTML
どの要素をソート、フィルタ（抽出）かはformのセレクトで選択してもらいます。
また、galleryAreaで画像を表示する領域を作成します。タグの生成はJavascriptで行います。
<section class="item section01">
<h2>Background gradient</h2>
<p class="ttl">▼ソート</p>
<div class="gallery_select">
<select name="sort" class="form-control">
<option></option>
<option value="id">id</option>
<!-- <option value="img">img</option>-->
<option value="date">投稿日順</option>
<option value="group">種類順</option>
</select>
</div>
<p class="ttl">▼抽出</p>
<div class="gallery_select">
<!--select.form-control.filter-->
<select name="filter" class="form-control">
<option></option>
<option value="cat">ねこ</option>
<option value="dog">いぬ</option>
<option value="fish">おさかな</option>
<option value="bird">とり</option>
<option value="other">その他</option>
</select>
</div>
<div class="galleryArea">
//ここに写真を表示するHTML追加
</div>Javascript
以下のコードは、Javascriptのsort、fileterに関する部分を抜き出しています。
classでまとめていますが、先程の例をほぼそのまま当てはめています。
引数には、ユーザーに選択してもらったキーと並び替える配列の要素が渡って来ます。
//ギャラリーチェンジ
class ElmChange {
constructor(baseList) {
this.self = this;
this.baseList = baseList;
this.list;
}
filter(list,key) {
if(!key) {
return list;
}
const result = list.filter((item) => {
const genreA = item.group === key ? true : false;
if (genreA) {
return item;
}
});
return result;
}
sort(list,key) {
if(!key) {
return list;
}
const result=list.sort(function(a, b){
if (a[key] > b[key]) return 1;
if (a[key] < b[key]) return -1;
return 0;
});
return result;
}
}まとめ
arrayのfilter、sortメソッドを使えば、要素の中のオブジェクトのキーをベースに並び替えや抽出ができます。データベースを使うほどではないシーンで役立ちそうです！
