JSONデータをソートする方法
JSONデータをソートする方法を紹介します。
ブラウザやPC環境等に依存するかもしれませんが、FirefoxやGoogle Chromeといった最近のブラウザであれば数千行のデータでも1秒かからない程度でソートして表示されます。すべてのブラウザで確認していないので不具合があったらすいません。
引用サイトは下記です。
１．基本
次のようなJSONデータがあると仮定します。
var data = [
{"id":"foo", "number":"2000"},
{"id":"bar", "number":"3000"},
{"id":"hoge" "number":"1000"}
];JSONデータをソートするには、次のsort_by()関数とsortを組み合わせます。
var sort_by = function(field, reverse, primer){
reverse = (reverse) ? -1 : 1;
return function(a,b){
a = a[field];
b = b[field];
if (typeof(primer) != 'undefined'){
a = primer(a);
b = primer(b);
}
if (a<b) return reverse * -1;
if (a>b) return reverse * 1;
return 0;
}
}２．数値でソート
数値（JSONデータのnumber）でソートするには、１項のsort_by()関数とsortと組み合わせて、次のコードを実行します。
data.sort(sort_by('id', false, function(a){return a.toUpperCase()}));dataを出力すると、次のように降順で表示されます（出力サンプルは後述）。
3000:bar
2000:hoge
1000:foo昇順に表示するには、sort_by()関数の第2パラメータの「true」を「false」にします。
data.sort(sort_by('number', false, parseInt));これで昇順で表示されます。
1000:foo
2000:hoge
3000:bar３．文字でソート
文字（JSONデータのid）でソートするには次のようにします。降順・昇順の設定は数値と同様です。
data.sort(sort_by('id', false, function(a){return a.toUpperCase()}));このように、アルファベット順にソートされます。
3000:bar
1000:foo
2000:hoge４．サンプル
動作サンプルを掲載しておきますのでご利用ください。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var data = [
{"id":"foo", "number":"1000"},
{"id":"bar", "number":"3000"},
{"id":"hoge", "number":"2000"}
];
var sort_by = function(field, reverse, primer){
reverse = (reverse) ? -1 : 1;
return function(a,b){
a = a[field];
b = b[field];
if (typeof(primer) != 'undefined'){
a = primer(a);
b = primer(b);
}
if (a<b) return reverse * -1;
if (a>b) return reverse * 1;
return 0;
}
}
$(function(){
data.sort(sort_by('number', true, parseInt));
// data.sort(sort_by('id', false, function(a){return a.toUpperCase()}));
for (i = 0; i < data.length; i++) {
$('#result').append(data[i].number +':'+ data[i].id +'<br />');
}
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>Posted by yujiro このページの先頭に戻る
- jQuery.ajax()のJSONやJSONP取得で200 OKなのにエラーになる件のまとめ
トラックバックURL
コメントする
greeting
