「jqueryでcsvをオブジェクトに変換する」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryでcsvをオブジェクトに変換する

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jqueryでcsvをオブジェクトに変換する</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.   jQuery.extend({
  11.     csv: function(delim, quote, lined) {
  12.       delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
  13.       quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
  14.       lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;
  16.       function splitline (v) {
  17.         // Split the line using the delimitor
  18.         var arr  = v.split(delim), out = [], q;
  19.         for (var i=0, l=arr.length; i<l; i++) {
  20.           if (q = arr[i].match(quote)) {
  21.             for (j=i; j<l; j++) {
  22.               if (arr[j].charAt(arr[j].length-1) == q[0]) {
  23.                 break;
  24.               }
  25.             }
  26.             var s = arr.slice(i,j+1).join(delim);
  27.             out.push(s.substr(1,s.length-2));
  28.             i = j;
  29.           }
  30.           else {
  31.             out.push(arr[i]);
  32.           }
  33.         }
  35.         return out;
  36.       }
  38.       return function(text) {
  39.         var lines = text.split(lined);
  40.         for (var i=0, l=lines.length; i<l; i++) {
  41.           lines[i] = splitline(lines[i]);
  42.         }
  43.         
  44.         // 最後の行を削除
  45.         var last = lines.length - 1;
  46.         if (lines[last].length == 1 && lines[last][0] == "") {
  47.           lines.splice(last, 1);
  48.         }
  49.         
  50.         return lines;
  51.       };
  52.     }
  53.   });
  55.   function ViewModel() {
  56.     var self = this;
  58.     var csvStr = "";
  59.     csvStr += "ねぎ間,168"         + "\n";
  60.     csvStr += "ハツ,136"           + "\n";
  61.     csvStr += "レバー,136"         + "\n";
  62.     csvStr += "ぼんちり,136"       + "\n";
  63.     csvStr += "はらみ,136"         + "\n";
  64.     csvStr += "うずら玉子,136"     + "\n";
  65.     csvStr += "なんこつ,136"       + "\n";
  66.     csvStr += "手羽先,168"         + "\n";
  67.     csvStr += "せせり,136"         + "\n";
  68.     csvStr += "白レバー,168"       + "\n";
  69.     csvStr += "丸ごとシマウマ,290" + "\n";
  70.     
  71.     var obj = $.csv(",", "", "\n")(csvStr);
  72.     
  73.     self.convert = ko.observable(obj);
  74.   }
  76.   $(document).ready(function () {
  77.     ko.applyBindings(new ViewModel());
  78.   });
  79. </script>
  81. </head>
  82. <body>
  84. <h1>jqueryでcsvをオブジェクトに変換する</h1>
  85. <ul data-bind="foreach: convert">
  86. <li><b data-bind="text: $data[0]"></b> - <span data-bind="text: $data[1]"></span></li>
  87. </ul>
  88. <p>※knockout.jsを使って出力しています</p>
  90. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  91. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  92. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  93. </div>
  95. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  96. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  97. </div>
  99. </body>
  100. </html>