JavaScript の sortメソッドを使用した配列の並び替えのご紹介。
JavaScriptで配列の並び替え
sort メソッドで配列の要素をソート
sortメソッドで簡単にアルファベット順に並び替えができます。
var array = ['orange','apple','strawberry','banana']; console.log( array.sort() ); /* 結果:Array [ "apple", "banana", "orange", "strawberry" ] */
アルファベット順で配列を並び替え
window.onload = function(){ var prefecture = ['kagawa','ehime','tokushima','kochi']; prefecture.sort(); var list = ""; for(i = 0 ; i < prefecture.length ; i++ ){ list += "<p>"+prefecture[i]+"</p>\n" } document.getElementById("pref").innerHTML = list; }
数値順で配列を並び替え
sortメソッドは、通常アルファベット順の並び替えになります。数値の並び替えを行う場合は、比較する関数の作成が必要になります。関数で2つの引数 val1 と val2 を比較して戻り値を返します。
戻り値がプラスの場合は、降順で並び替え。戻り値がマイナスの値は、昇順で並び替え。
function(val1,val2){ if( val1 < val2 ) { return 1; } else { return -1; } } // 三項演算子を使うと少しスッキリとした形で書けます function(val1,val2){ return ( val1 < val2 ? 1 : -1); }
<script> window.onload = function(){ var menus = [300,340,210,460]; menus.sort(function(val1,val2){ if( val1 < val2 ) { return 1; } else { return -1; } }); var list = ""; for(i = 0 ; i < menus.length ; i++ ){ list += "<p>"+menus[i]+"</p>\n" } document.getElementById("menus").innerHTML = list; } </script>
連想配列の数値で並び替え
先程と同様に関数で引数を比較して戻り値を返します。
違うのは、比較する要素を指定している所です。
var val1 = val1.price; var val2 = val2.price;
<script> window.onload = function(){ var menus = [ {'burger':'チキンバーガー', 'price':320}, {'burger':'モスバーガー', 'price':370}, {'burger':'チーズバーガー', 'price':250}, {'burger':'Wテリヤキバーガー', 'price':480} ]; menus.sort(function(val1,val2){ var val1 = val1.price; var val2 = val2.price; if( val1 < val2 ) { return 1; } else { return -1; } }); var list = ""; for(i = 0 ; i < menus.length ; i++ ){ list += "<p>"+menus[i]["burger"]+" : ¥"+menus[i]["price"]+"</p>\n" } document.getElementById("menus").innerHTML = list; } </script>
window.onload の省略
window.onload = function(){…} 部分は省略できますが、JavaScripts で書き換える id (html) の記述を JavaScripts より先にしないと getElementById で id の取得が出来ないため表示されません。
//scripの記述を前にする <script> document.getElementById("menus1").innerHTML = 'あいうえお'; </script> <p id="menus1"></p> //---------------------------------// //scripの記述を後にする <p id="menus2"></p> <script> document.getElementById("menus2").innerHTML = 'かきくけこ'; </script>
jQueryで配列jsonを読込んで並び替え
最後に外部ファイルの json を jQuery で読込んで並び替えをしてみました。
先程までと違うのは、jQueryを使用してるのと $.getJSON を使って読みんでいる部分になります。jQuery は、2.1.1 を使用。
先程までと違うのは、jQueryを使用してるのと $.getJSON を使って読みんでいる部分になります。jQuery は、2.1.1 を使用。
burger.json のサンプル
[ {"burger":"チキンバーガー","price":320}, {"burger":"モスバーガー","price":370}, {"burger":"チーズバーガー","price":250}, {"burger":"Wテリヤキバーガー","price":480} ]
サンプルソース
$(function() { $.getJSON("burger.json" , function(data) { data.sort(function(val1, val2) { return ( val1.price < val2.price ? 1 : -1); }); for(var i = 0; i < data.length; i++) { $("#menus").append("<li>"+data[i].burger+" : ¥"+data[i].price+"</li>"); } }); });
以上
配列の並び替えをご紹介させて頂きました。JavaScriptで配列の並び替えが必要な場合がありましたらお試し下さい。
ハンバーガーメニュー 引用元:ハンバーガー | メニュー | モスバーガー公式サイト