配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】

JavaScript

配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。
今回操作する配列には、このようにオブジェクトが格納されているとします。
それぞれのオブジェクトには、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/03/28の値を基準に配列の要素(オブジェクト)を並び替えます。

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メソッドを使えば、要素の中のオブジェクトのキーをベースに並び替えや抽出ができます。データベースを使うほどではないシーンで役立ちそうです!