Jsonデータの読込み

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Jsonデータの読込み</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     function WebmailViewModel() {
  11.       var self = this;
  12.       // JSON的なデータの読込み
  13.       self.jsonDataA = ko.observableArray();
  14.       $.getJSON("./testdata/testdataA.txt", {}, function(jsonA){
  15.           self.jsonDataA(jsonA);
  16.         }
  17.       );
  18.       // JSON的なデータの読込み(多重配列版)
  19.       self.jsonDataB = ko.observableArray();
  20.       $.getJSON("./testdata/testdataB.txt", {}, function(jsonB){
  21.           self.jsonDataB(jsonB.item);
  22.         }
  23.       );
  24.     }
  25.     ko.applyBindings(new WebmailViewModel());
  26.   });
  27. </script>
  28. <style type="text/css">
  29. table{margin-top:0.5em;}
  30. th, td{border:1px solid #ccc;}
  31. .wrap{margin-top:1em;border:1px solid #ccc;padding:5px;}
  32. .jsonwrap{margin-top:0.5em;padding:5px;background-color:#f0f0f0;}
  33. </style>
  34. </head>
  35. <body>
  36. <h1>Jsonデータの読込み</h1>
  37. <div class="wrap">
  38. 読込んだファイルの記述は下記のような感じ。
  39. <div class="jsonwrap">
  40. {"name":"丸ごとシマウマ","price":"290"}
  41. </div>
  42. <table>
  43.   <tbody>
  44.     <tr>
  45.       <tr><th>品名</th><td data-bind="text: jsonDataA().name"></td></tr>
  46.       <tr><th>金額</th><td data-bind="text: jsonDataA().price"></td></tr>
  47.     </tr>
  48.   </tbody>
  49. </table>
  50. </div>
  51. <div class="wrap">
  52. 読込んだファイルの記述は下記のような感じ。
  53. <div class="jsonwrap">
  54. {"item":[{"name":"ねぎ間","price":"168"},{"name":"ハツ","price":"136"},{"name":"レバー","price":"136"},{"name":"ぼんちり","price":"136"},{"name":"はらみ","price":"136"},{"name":"うずら玉子","price":"136"},{"name":"なんこつ","price":"136"},{"name":"手羽先","price":"168"},{"name":"せせり","price":"136"},{"name":"白レバー","price":"168"},{"name":"丸ごとシマウマ","price":"290"}]}
  55. </div>
  56. <table>
  57.   <thead><tr><th>品名</th><th>金額</th></thead>
  58.   <tbody data-bind="foreach: jsonDataB">
  59.     <tr>
  60.       <td data-bind="text: name"></td>
  61.       <td data-bind="text: price"></td>
  62.     </tr>
  63.   </tbody>
  64. </table>
  65. </div>
  66. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  67. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  68. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  69. </div>
  70. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  71. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  72. </div>
  73. </body>
  74. </html>