jQuery + JSON part2 - 三流プログラマの雑記

と言うことで手を加えてみることにした。

前回はとりあえず、表示だけ出来るようにしてみた。
http://d.hatena.ne.jp/morio_1101/20120730/1343660395

前回のフォーマットだと、どうにも実データっぽくない。
と言うことでそれっぽいのを作ってみた。

data/sample.json

[{
	"title": "タイトル１",
	"price": "1280",
	"pages": [
		{ "page": "サンプル１", "g": 22 },
		{ "page": "サンプル２", "g": 33 },
		{ "page": "サンプル３", "g": 11 }
	]
},
{
	"title": "タイトル２",
	"price": "1235",
	"pages": [
		{ "page": "サンプル４", "g": 66 },
		{ "page": "サンプル５", "g": 55 },
		{ "page": "サンプル６", "g": 44 }
	]
}]

うーん、突っ込みどころ満載だ！
だがそれがいい。
とりあえず、gってなんだよ（汗

と言う話は置いといて、
これのデータを読み込むためにjsをちまちま更新

test.js

$(document).ready( function() {
  var test = "";
  $.getJSON("data/sample.json", function(data){
  data.sort(sort_by('price',false,parseInt));
  for(var i in data){
    test += data[i].title + "\n";
    test += data[i].price + "\n";
    data[i].pages.sort(sort_by('g',false,parseInt));
    for(var j in data[i].pages){
      test += data[i].pages[j].page + " " + data[i].pages[j].g;
    }
    test += "\n";
  }
    $("#show_head").text(test);
  });

  $("#btn_1").click(function(){
    alert("取得したデータ：" + test);
  });

  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;
     }
  }

});

うーむ、エラー処理は入ってないよ！
とりあえず、グローバル変数宣言するのは微妙だからクリックイベントを中に入れてみた。

sort_byは以下のサイトを参考にさせていただきました！
http://www.koikikukan.com/archives/2011/04/05-025555.php

と、イベントの方法を書き換えたからhtmlを編集した。

index.html

<html>
<head>
  <title>js sample</title>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
  <div id="show_head"></div>
  <input id="btn_1" type="button" value="データ取得" />
</body>
</html>

ボタンのonclickイベント取っただけなんだけどね！

奥が深いね、、、jQuery
br入れてみたり\n入れてみたりしたけど出力した際改行されないじゃまいか（汗
どうすりゃいいんだろうな、、、

とりあえず、エラー処理について理解を深めないといけないなー