Javascript

APIから取得したデータをソートする方法【JavaScript】

APIから取得したデータをソートしたい
オブジェクトを丸ごとソートする方法ってないのかな

以上の疑問の解決記事です。

 

やりたいこととしては以下です。

特定の値を基準にソートする

 

例えば、以下のようなデータがあるとします。

名前 性別 年齢 居住地 家賃
山田 男性 22 東京 60,000
鈴木 女性 28 埼玉 80,000
山本 男性 33 千葉 100,000
田中 女性 19 東京 70,000

 

このデータを、年齢を基準に並べ替える↓(降順ソートさせたい)

名前 性別 年齢 居住地 家賃
山本 男性 33 千葉 100,000
鈴木 女性 28 埼玉 80,000
山田 男性 22 東京 60,000
田中 女性 19 東京 70,000

これをクリックイベントで「年齢」「家賃」等でソートさせたかったのでした。

今回は、上記のようなソート方法について解説します。

 

 

前提

前提は以下の通り。

  1. APIからデータを取得
  2. 取得データをテーブルに表示
  3. テーブル内の“^“や“v“アイコンをクリック
  4. ソートを実行
  5. テーブル内データを一旦非表示にする
  6. ソートされたデータが再表示される

※本記事では、④のみ解説します。

     

    ソースコード(ブラウザ確認可)

    降順の場合

    まず、コードだけ載せておきます。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            let json = [
                {
                    "name": "山田",
                    "gender": "男性",
                    "age": "22",
                    "address": "東京",
                    "rent": "60000" 
                },
                {
                    "name": "鈴木",
                    "gender": "女性",
                    "age": "28",
                    "address": "埼玉",
                    "rent": "80000" 
                },
                {
                    "name": "山本",
                    "gender": "男性",
                    "age": "33",
                    "address": "千葉",
                    "rent": "100000" 
                },
                {
                    "name": "田中",
                    "gender": "女性",
                    "age": "19",
                    "address": "東京",
                    "rent": "70000" 
                }
            ]
    
            //降順に並びかえ
            let descendSort = json.sort(function(a, b) {
                return (a.age > b.age) ? -1 : 1;
            })
            console.log(descendSort)
        </script>
    </body>
    </html>

     

    実行結果

     

    元の並びは↓なので並び替わっていることが分かります。

     

    昇順の場合

    不等号の向きが逆になります。

            let ascendSort = json.sort(function(a, b) {
                return (a.age < b.age) ? -1 : 1;
            })
            console.log(ascendSort)

     

    実行結果

     

    一度、あなたのブラウザでも確認いただくと理解しやすいかと思います。

     

     

    ソート関数についての解説

            let descendSort = json.sort(function(a, b) {
                return (a.age > b.age) ? -1 : 1;
            })

     

    このsort関数の中身について、「?」となりませんでしたか?

    理屈は、以下のようです。

     

    ・Array.prototype.sort()

    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description

     

    まとめ

    本記事では、「APIから取得したデータをソートする方法」について、以下のことを解説しました。

    • 前提
    • ソースコード(ブラウザ確認可)
    • ソート関数についての解説

    初めは、オブジェクト丸ごとソートできると知らず、四苦八苦していました。
    が、こんな方法があるとは驚きでした。

    実装の一助になれば幸いです。

     

    参考

    ・javascriptでオブジェクトをソートするには?要素をキーに並べ替えhttps://keizokuma.com/js-array-object-sort/

    ABOUT ME
    大城ゆう
    エンジニア歴5年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。