GHWEB06.GRASSHOPPER

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':'Ｗテリヤキバーガー', '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>

サンプル

最後に外部ファイルの json を jQuery で読込んで並び替えをしてみました。
先程までと違うのは、jQueryを使用してるのと $.getJSON を使って読みんでいる部分になります。jQuery は、2.1.1 を使用。

burger.json のサンプル

[
  {"burger":"チキンバーガー","price":320},
  {"burger":"モスバーガー","price":370},
  {"burger":"チーズバーガー","price":250},
  {"burger":"Ｗテリヤキバーガー","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で配列の並び替えが必要な場合がありましたらお試し下さい。

ハンバーガーメニュー 引用元：ハンバーガー | メニュー | モスバーガー公式サイト