「配列（オブジェクト？）の中にある配列（オブジェクト？）の出力」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

配列（オブジェクト？）の中にある配列（オブジェクト？）の出力

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>配列（オブジェクト？）の中にある配列（オブジェクト？）の出力</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.     ko.applyBindings(new viewModel());
  12.   });
  14.   function viewModel()
  15.   {
  16.     var self = this;
  17.     
  18.     var KushiAry = [
  19.       {name: "ねぎ間",         price: 168},
  20.       {name: "ハツ",           price: 136},
  21.       {name: "レバー",         price: 136},
  22.       {name: "ぼんちり",       price: 136},
  23.       {name: "はらみ",         price: 136},
  24.       {name: "うずら玉子",     price: 136},
  25.       {name: "なんこつ",       price: 136},
  26.       {name: "手羽先",         price: 168},
  27.       {name: "せせり",         price: 136},
  28.       {name: "白レバー",       price: 168},
  29.       {name: "コニク",         price: 110},
  30.       {name: "丸ごとシマウマ", price: 290}
  31.     ];
  33.     var TasteAry = [
  34.       {name: "ねぎ間", taste: "味噌"}, 
  35.       {name: "ねぎ間", taste: "ポン酢"}, 
  36.       {name: "ねぎ間", taste: "芥子"}, 
  37.       {name: "ハツ", taste: "塩"}, 
  38.       {name: "ハツ", taste: "味噌"}, 
  39.       {name: "レバー", taste: "塩"}, 
  40.       {name: "レバー", taste: "味噌"}, 
  41.       {name: "レバー", taste: "芥子"}, 
  42.       {name: "ぼんちり", taste: "塩"}, 
  43.       {name: "ぼんちり", taste: "味噌"}, 
  44.       {name: "ぼんちり", taste: "ポン酢"}, 
  45.       {name: "ぼんちり", taste: "芥子"}, 
  46.       {name: "はらみ", taste: "塩"}, 
  47.       {name: "はらみ", taste: "たれ"}, 
  48.       {name: "はらみ", taste: "芥子"}, 
  49.       {name: "うずら玉子", taste: "味噌"}, 
  50.       {name: "うずら玉子", taste: "芥子"}, 
  51.       {name: "なんこつ", taste: "塩"}, 
  52.       {name: "なんこつ", taste: "ポン酢"}, 
  53.       {name: "手羽先", taste: "塩"}, 
  54.       {name: "手羽先", taste: "たれ"}, 
  55.       {name: "手羽先", taste: "味噌"}, 
  56.       {name: "手羽先", taste: "ポン酢"}, 
  57.       {name: "手羽先", taste: "芥子"}, 
  58.       {name: "せせり", taste: "塩"}, 
  59.       {name: "せせり", taste: "味噌"}, 
  60.       {name: "せせり", taste: "芥子"}, 
  61.       {name: "白レバー", taste: "味噌"}, 
  62.       {name: "白レバー", taste: "ポン酢"}, 
  63.       {name: "丸ごとシマウマ", taste: "塩"}, 
  64.       {name: "丸ごとシマウマ", taste: "たれ"}, 
  65.       {name: "丸ごとシマウマ", taste: "味噌"}, 
  66.       {name: "丸ごとシマウマ", taste: "ポン酢"},
  67.       {name: "丸ごとシマウマ", taste: "芥子"}
  68.     ];
  69.     
  70.     // KushiAryの中にTasteAryを組み込んでいく
  71.     for (i=0; i<KushiAry.length; i++)
  72.     {
  73.       k = 0;
  74.       // Tasteを作成しておく。
  75.       KushiAry[i]["Taste"] = new Array();
  76.       for (j=0; j<TasteAry.length; j++)
  77.       {
  78.         if (KushiAry[i]["name"] == TasteAry[j]["name"])
  79.         {
  80.           KushiAry[i]["Taste"][k] = TasteAry[j];
  81.           k++;
  82.         }
  83.       }
  84.     }
  85.     
  86.     self.kushiData = ko.observable();
  87.     self.kushiData(KushiAry);
  88.   }
  89. </script>
  91. <style type="text/css">
  92.   table
  93.   {
  94.     border-collapse:collapse;
  95.     margin:0;
  96.   }
  98.   th, td
  99.   {
  100.     text-align:left;
  101.     vertical-align:top;
  102.     padding:3px;
  103.     font-weight:normal;
  104.     border:1px solid #ccc;
  105.   }
  106.   th
  107.   {
  108.     background-color:#ffffdd;
  109.   }
  110. </style>
  112. </head>
  113. <body>
  114. <h1>配列（オブジェクト？）の中にある配列（オブジェクト？）の出力</h1>
  116. <div>
  117. <table>
  118. <thead>
  119. <tr><th>メニュー</th><th>味</th><th>価格</th></tr>
  120. </thead>
  121. <tbody data-bind="visible:kushiData, foreach: kushiData">
  122. <tr>
  123. <td data-bind="text: name"></td>
  124. <td data-bind="visible:Taste, foreach: Taste"><span data-bind="text: taste"></span>、</td>
  125. <td data-bind="text: price"></td>
  126. </tr>
  127. </tbody>
  128. </table>
  129. </div>
  131. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  132. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  133. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  134. </div>
  136. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  137. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  138. </div>
  140. </body>
  141. </html>