- 締切済み
javascriptでcsvのデータを使い価格表示
はじめまして、garage-daxと申します。 現在、会社のサイトを作成しておりまして、 HTML並びにjavascriptを勉強しております。 そこで、つまづいておりまして、諸先輩方、ご教授お願い したいと思っております。 やりたいこととしては、jsvascriptとHTMLのみで価格を別管理したいのです。 今後の消費税増税対応が面倒なので、価格は別管理にしたいと思っております。 つきましては、csvに「商品ID」「商品価格」を格納し、HTMLの「class="price"」後に 価格を表示したく思っております。 下記までは、自分なりにがんばってみたのですが、このソースだと「商品A」しか 価格が入りません。 これを全ての商品に適応させたいのですが、可能でしょうか。 よろしくお願いします。 Web表示------------------------ 商品名A ┗価格：9,800円//ここの価格表示できました 商品名B ┗価格：12,800円 商品名C ┗価格：22,800円 商品名D ┗価格：7,500円 ------------------------------- price.csv---------------------- "商品名A","9,800" "商品名B","12,800" "商品名C","22,800" "商品名D","7,500" ------------------------------- html--------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $('.price').each(function(i){ var kakaku = '<br>┗<font color="#CC0000">価格：9,800円</font><br>'; $(this).after(kakaku); }); </script> </head> <body> <a href="商品名A.html" class="price">商品名A</a><br> <a href="商品名B.html" class="price">商品名B</a><br> ┗<font color="#CC0000">価格：12,800円</font><br> ←ここの価格を自動表示させたい <a href="商品名C.html" class="price">商品名C</a><br> ┗<font color="#CC0000">価格：22,800円</font><br> ←ここの価格を自動表示させたい <a href="商品名D.html" class="price">商品名D</a><br> ┗<font color="#CC0000">価格：7,500円</font><br> ←ここの価格を自動表示させたい </body> </html> -------------------------------
- garage-dax
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- hamachi98
- ベストアンサー率100% (5/5)
一気にプログラミング要素が盛りだくさんになるのであまり気が進まなかったのですが、 実際のHTMLは他の要素も間に入っているような場合は、 たしかに付け合わせをして追記していかないと都合が悪いことになりそうですね。 失礼致しました。 処理フローの概略としては 1:CSVデータを読み込み、商品名をキーとした配列を定義 2:.priceをeachし、自身のテキスト（＝商品名）に該当する価格をappend という形ですが、AjaxでCSVデータを取得しに行くので実行タイミングを取得後にしなければならないので eachする処理一式を関数化し、取得後に実行するようにしました ※前回使用したjquery.csvが思ったように動かなかったので https://code.google.com/p/js-tables/source/browse/trunk/jquery.csv.js?r=22 を使用しました ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $.get( 'price.csv', function (data) { var csv = $.csv()(data); var item = new Array(); $(csv).each(function(){ item[this[0]] = this[1]; }); addPrice(item); } ); function addPrice(item) { $('.price').each(function(){ $(this).after('<br>┗<font color="#CC0000">価格：' + item[$(this).text()] + '円</font><br>'); }); } </script> </head> <body> <a href="商品名A.html" class="price">商品名A</a><br> <a href="商品名B.html" class="price">商品名B</a><br> <a href="商品名C.html" class="price">商品名C</a><br> <a href="商品名D.html" class="price">商品名D</a><br> </body> </html>
- hamachi98
- ベストアンサー率100% (5/5)
提示されていた処理ロジックは 「HTML内に存在する商品リンクに対応する価格を追記する」 というような方向だと思うのですが、 その方式だと情報の付け合わせが大変なのと、 商品追加の際にHTMLの変更も必要になるので 「CSVのデータを元に商品リンクと価格を出力する」 という方向でループ処理させてみました。 ※csvのパースには以下のスクリプトを使用させていただきました jquery-csv http://tips.recatnap.info/wiki/JQuery%E3%81%A7CSV%E3%82%92%E9%85%8D%E5%88%97%E3%81%AB%E5%A4%89%E6%8F%9B_($.csv()) ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $.get( 'price.csv', function (data) { var csv = $.csv()(data); $(csv).each(function(){ $("#list").append( '<a href="' + this[0] + '.html" class="price">' + this[0] + '</a><br> ┗<font color="#CC0000">価格：' + this[1] + '円</font><br>' ); }); } ); </script> </head> <body> <div id="list"></div> </body> </html>
補足
hamachi98さん ありがとうございました。 お察しのとおり、 >「HTML内に存在する商品リンクに対応する価格を追記する」 >というような方向だと思うのですが、 だっったのですが、こちらは可能でしょうか。 お手数をおかけいたします。 ご教授頂けますでしょうか。
お礼
ご連絡が遅くなりまして、申し訳ございません。ご教授頂いたソースを駆使して、なんとか消費税増税対応を乗り切ることができました。 本当に助かりました。 ありがとうございました。