【JavaScript】オブジェクトを昇順、降順に並び替える！

今回のテーマ

今回はJavaScriptで設定したオブジェクトをボタンを押せば昇順、降順に並び替えるプログラムを考えていく

サンプルコード

早速だがHTMLとJavaScriptの記述を以下のようにする。

index.html

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>テスト</title>
</head>

<body>
  <div class="button-wrapper">
    <button class="ascending">昇順</button>
    <button class="descending">降順</button>
  </div>
  <ul class="user_list">
  </ul>
<script src="app.js"></script>
</body>
</html>

app.js

// user_listという名前でオブジェクトを作成する
const user_list=[
    {id:1,name:"鈴木"},
    {id:5,name:"田中"},
    {id:3,name:"高橋"},
    {id:2,name:"加藤"},
    {id:4,name:"中島"}
];

// 画面にuser_listを表示させる処理
const updateList=()=>{
  let listHtml='';
  for(const data of user_list){
    listHtml +=`<li>${data.id}:${data.name}</li>`;
  }  
  const User_List= document.querySelector('.user_list');
  User_List.innerHTML =listHtml;
};

// 降順に並び替える
const sortByDescending=()=>{
    user_list.sort((a,b)=>{
        return b.id - a.id;
    });
    updateList();
}

// 昇順に並び替える
const sortByAscending=()=>{
    user_list.sort((a,b)=>{
        return a.id - b.id;
    });
    updateList();
}

// 降順ボタンを押せば、user_listを昇順に並び替える
document.querySelector('.descending').addEventListener('click',()=>{
    sortByDescending();
});

// 昇順ボタンを押せば、user_listを昇順に並び替える
document.querySelector('.ascending').addEventListener('click',()=>{
    sortByAscending();
});

画面

昇順ボタンを押した画面
f:id:satoru103:20201114185356p:plain

降順ボタンを押した画面
f:id:satoru103:20201114185412p:plain

コードの詳細をみる

jsのファイルを詳細に見ていく

1.オブジェクトのリストを設定

const user_list=[
    {id:1,name:"鈴木"},
    {id:5,name:"田中"},
    {id:3,name:"高橋"},
    {id:2,name:"加藤"},
    {id:4,name:"中島"}
];

2.user_listを画面上に表示させる
for文を使用して繰り返し処理でlistHtmlにuser_listの要素を代入している最後にinnerHTMLで画面上に表示させている。 ${}を使用して要素を作成するときは``(グレイヴ・アクセント) をつけることを忘れずに..

const updateList=()=>{
  let listHtml='';
  for(const data of user_list){
    listHtml +=`<li>${data.id}:${data.name}</li>`;
  }  
  const User_List= document.querySelector('.user_list');
  User_List.innerHTML =listHtml;
};

3.user_listの要素を降順に並びかえる
降順に並びかえるためにsortByDescendingという処理を作成
sort関数で降順に設定している。aとbの意味など細かい点は理解不足であるが以下のサイトを例にここではidを基準に並び替えている。

developer.mozilla.org

要素を並びかえても表示させないと意味がないので最後に2.で作成した updateListの処理を付け加える。

// 降順に並び替える
const sortByDescending=()=>{
    user_list.sort((a,b)=>{
        return b.id - a.id;
    });
    updateList();
}

4.user_listの要素を昇順に並びかえる
3.と同様である。違いは「return a.id - b.id」の箇所を逆にしている。

const sortByAscending=()=>{
    user_list.sort((a,b)=>{
        return a.id - b.id;
    });
    updateList();
}

5.それぞれのボタンに対してイベントを追加
ここはそのままなので、詳細説明は省く

// 降順ボタンを押せば、user_listを昇順に並び替える
document.querySelector('.descending').addEventListener('click',()=>{
    sortByDescending();
});

// 昇順ボタンを押せば、user_listを昇順に並び替える
document.querySelector('.ascending').addEventListener('click',()=>{
    sortByAscending();
});