「Jsonデータの読込み」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     function WebmailViewModel() {
  12.       var self = this;
  14.       // JSON的なデータの読込み
  15.       self.jsonDataA = ko.observableArray();
  16.       $.getJSON("./testdata/testdataA.txt", {}, function(jsonA){
  17.           self.jsonDataA(jsonA);
  18.         }
  19.       );
  21.       // JSON的なデータの読込み（多重配列版）
  22.       self.jsonDataB = ko.observableArray();
  23.       $.getJSON("./testdata/testdataB.txt", {}, function(jsonB){
  24.           self.jsonDataB(jsonB.item);
  25.         }
  26.       );
  28.     }
  30.     ko.applyBindings(new WebmailViewModel());
  31.   });
  32. </script>
  34. <style type="text/css">
  35. table{margin-top:0.5em;}
  36. th, td{border:1px solid #ccc;}
  37. .wrap{margin-top:1em;border:1px solid #ccc;padding:5px;}
  38. .jsonwrap{margin-top:0.5em;padding:5px;background-color:#f0f0f0;}
  39. </style>
  41. </head>
  42. <body>
  43. <h1>Jsonデータの読込み</h1>
  45. <div class="wrap">
  46. 読込んだファイルの記述は下記のような感じ。
  47. <div class="jsonwrap">
  48. {"name":"丸ごとシマウマ","price":"290"}
  49. </div>
  50. <table>
  51.   <tbody>
  52.     <tr>
  53.       <tr><th>品名</th><td data-bind="text: jsonDataA().name"></td></tr>
  54.       <tr><th>金額</th><td data-bind="text: jsonDataA().price"></td></tr>
  55.     </tr>
  56.   </tbody>
  57. </table>
  58. </div>
  60. <div class="wrap">
  61. 読込んだファイルの記述は下記のような感じ。
  62. <div class="jsonwrap">
  63. {"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"}]}
  64. </div>
  65. <table>
  66.   <thead><tr><th>品名</th><th>金額</th></thead>
  67.   <tbody data-bind="foreach: jsonDataB">
  68.     <tr>
  69.       <td data-bind="text: name"></td>
  70.       <td data-bind="text: price"></td>
  71.     </tr>
  72.   </tbody>
  73. </table>
  74. </div>
  76. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  77. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  78. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  79. </div>
  81. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  82. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  83. </div>
  85. </body>
  86. </html>