質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3032閲覧

CSVの読み込み 文字分割ができない

navca

総合スコア44

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/11/29 22:53

CSVの読み込みをやってみようと思い、ちょうどいいサンプルコードを探して読み込むことはできましたが、改行してる箇所を指定して文字分割しているにもかかわらず、変なところで改行されているので困ってます。

function

1 var req = new XMLHttpRequest(); 2 req.open("get", "sample.csv", true); 3 req.send(null); 4 5 req.onload = function(){ 6 convertCSVtoArray(req.responseText); 7 }; 8} 9 10function convertCSVtoArray(str){ 11 var result = []; 12 var tmp = str.split("\r\n"); 13 14 for(var i=0;i<tmp.length;i++){ 15 result[i] = tmp[i].split(","); 16 } 17 18 document.write(result); 19} 20 21getCSV();

↑がそのコードなんですが、結果は以下のような感じです。

USD/JPY,,,,,日付,始値,高値,安値,終値,2016/11/29

08:15,111.830,111.850,111.822,111.845,2016/11/29
08:10,111.808,111.852,111.805,111.832,2016/11/29
08:05,111.870,111.876,111.803,111.809,2016/11/29
08:00,111.806,111.884,111.797,111.871,2016/11/29
07:55,111.823,111.832,111.800,111.807,2016/11/29

元の内容は↓です。

USD/JPY,,,,

日付,始値,高値,安値,終値
2016/11/29 08:15,111.830,111.850,111.822,111.845
2016/11/29 08:10,111.808,111.852,111.805,111.832
2016/11/29 08:05,111.870,111.876,111.803,111.809
2016/11/29 08:00,111.806,111.884,111.797,111.871
2016/11/29 07:55,111.823,111.832,111.800,111.807
2016/11/29 07:50,111.843,111.857,111.824,111.824

なぜか日付と時間の間のスペースで改行されてしまっています。
OSによって改行コードが違うというので\rや\nなどもやってみましたが変わらず、いろいろサイトを探してみても改行に関するものは\rなどに関してのものが多く、わかりませんでした。
そもそもスペースを意味する(" ",0);が入ってるわけでもないのにスペース毎で区切っているのかも不思議です。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

himakuma

2016/11/30 00:46

日本語部分を削除して同じ処理をやった結果を掲載していただけませんか?
kei344

2016/11/30 04:59

参考にされたページがありましたら、URLを質問文に追記してください。
navca

2016/11/30 10:28

himakumaさん、kei344さんありがとうございました。解決しました。いらないかもしれませんが、一応元のコードのURLですhttp://uxmilk.jp/11586
guest

回答2

0

Plunker でテスト

Plunker でテスト <!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> <script> function getCSV(){ var req = new XMLHttpRequest(); req.open("get", "./test.csv", true); req.send(null); req.onload = function(){ convertCSVtoArray(req.responseText); }; } function convertCSVtoArray(str){ //================================================== // ★とりあえず str を pre で囲んで出してみる // ★この時点では問題ない形 //================================================== document.write("<h3>str</h3>"); document.write("<pre>"); document.write(str); document.write("</pre>"); document.write("<hr>"); var result = []; //================================================== // ★文字列を分割する //================================================== //var tmp = str.split("\r\n"); /* var tmp = str; tmp = tmp.replace(/\r\n/g, '\n'); // \r\n を \n に置換 tmp = tmp.replace(/\r/g, '\n'); // \r も \n に置換 tmp = tmp.split("\n"); // \n で分割 */ var tmp = str.split(/\r\n|\r|\n/); // 正規表現で一発で切った方が良いか //================================================== // ★配列を一行ずつ出力 //================================================== document.write("<h3>tmp (一行ずつ)</h3>"); for(var i=0;i<tmp.length;i++){ document.write("<p style='margin:5px;padding:2px;background:yellow'>"); document.write(tmp[i]); document.write("</p>"); } } getCSV(); </script> </head> <body> </body> </html>

上記は <p> で囲んでいるので一行ずつになっていますが、
KakeruKaneko さんも書かれている通り、元のコードでは繋がって一行で出力されました。

# Plunker (オンラインでJavaScriptコードが動かせるやつ) で試したところ、表示領域が横に狭いので
# 質問者さんの書かれた通りに変なところで改行して「見えました」が、
# それは単純に半角スペース等で
# 右端で改行が入っていただけで、ブラウザを広げたら一行で表示されました。

あと一応改行文字列で分割するところだけ、\r\n でも \r でも \n でも対応できるようにしてみました。

投稿2016/11/30 01:44

編集2016/11/30 01:45
sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

navca

2016/11/30 10:25

お礼が遅れまして失礼しました。回答ありがとうございます。 ># Plunker (オンラインでJavaScriptコードが動かせるやつ) で試したところ、表示領域が横に狭いので # 質問者さんの書かれた通りに変なところで改行して「見えました」が、 # それは単純に半角スペース等で # 右端で改行が入っていただけで、ブラウザを広げたら一行で表示されました。 そういうことだったんですか。全く見当違いなことに注力してました。恥ずかしい限りです^^;もっと視野を広く見ないとだめですね。 ありがとうございました。
guest

0

ベストアンサー

単純に出力時に改行文字を含めてないからではないでしょうか?
一行ごとに改行文字を付与すれば期待通りの結果になるかと思います。

js

1var req = new XMLHttpRequest(); 2 req.open("get", "sample.csv", true); 3 req.send(null); 4 5 req.onload = function(){ 6 convertCSVtoArray(req.responseText); 7 } 8 9 10function convertCSVtoArray(str){ 11 var result = []; 12 var tmp = str.split("\r\n"); 13 14 for(var i=0;i<tmp.length;i++){ 15 result[i] = tmp[i].split(","); 16 } 17 18 result.forEach(function(a){ 19 document.write(a+"<br>"); 20 }); 21} 22

投稿2016/11/30 01:31

KakeruKaneko

総合スコア115

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

navca

2016/11/30 10:08

お礼が遅れまして失礼しました。回答ありがとうございます。 回答いただいたコードで解決できました!まさかそんなところが原因だったとは!という感じでした^^;ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問