csvファイルをjavascriptのライブライリjqueryを使って配列に変換し出力する方法
csvファイルをjavascriptを使って配列に変換し、サイトに出力したい。
javascriptのライブライリを使って、簡単に実装したい。
このようなお悩みを解決します。
本記事では、javascriptのライブライリjqueryと、プラグインのjquery.csv.jsを使って、csvファイルを配列に変換し、サイトに出力する方法について解説します。
jqueryとプラグインjquery.csv.jsを読み込む
<!-- jqueryライブラリ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- jquery.csvプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
上記、jqueryライブラリとjquery.csvプラグインCDNをcsvを読み込みたいテンプレートファイルの任意の箇所にコピペします。
すでにjqueryライブラリがコード内にあれば最初のCDNは不要です。
jqueryを使ってcsv配列を出力
<script>
// CSVを配列で読み込む
$(function () {
function parseCsv(data) {
// csv配列を変数に格納
var csv = $.csv.toArrays(data);
console.log(csv);
}
// CSVファイルの読み込み
$.get("csvファイルまでのパス/test.csv", parseCsv, "text");
});
</script>
上記コードを前章でコピペしたCDNの後にコピペします。
コード内下部にある$get内にcsvファイルまでのパスを入れます。
csv変数にcsvファイルを配列にしたデータが定義されています。
console.logでcsv変数を出力して、確認しましょう。
以上でcsvファイルを配列に変換・出力が完了です。
文字化けしてしまう場合
<script>
$(function(){
// Shift-JISに変更する場合
$.ajaxSetup({
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}
});
$("body").load("test.csv");
})
</script>
文字化けしてしまう場合はcsvファイルがエクセルで作成されたものであり、Shift_JIS形式である可能性があります。
jqueryで読み込む際はutf-8形式にしなければいけないので、上記コードを任意の箇所にコピペします。
文字化けが解消されるかと思います。
まとめ
見積フォームなどの作成で、csvの商品管理データから任意の数値などをとりだしたい。
そんな時に本記事が役立つかと思います。
以上で解説を終わります。
目次
