JavaScriptで複数のCSVを取得しひとつのCSVごとに1つのselectフォームを表示しようとしております。
以下のようなJSを使っているのですが、aryCsvNameの配列にはいっている名前で複数のCSVを呼び込みたいのですが、
getElementById("select***").のところで、うまく***の箇所に配列の値をもっていけません。
aryCsvNameの値と***があえば、それぞれの<div>に表示されるのではないかとは思っているのですが、
それも予想です。
恐れ入りますが、どなたかいい方法をご教授ください。
function loadCSV() {
aryCsvName = ["1","2","5","10"];
for (var j = 0; j < aryCsvName.length; j++) {
var path = './data/'+aryCsvName[j]+'.csv';
var httpObj = createXMLHttpRequest(handleResult);
if (httpObj) {
httpObj.open("GET", path, true);
httpObj.send(null);
}
}
}
function handleResult() {
if ((this.readyState == 4) && (this.status == 200)) {
var text = getAjaxFilter()(this.responseText);
csvData = parseCSV(text);
///ここが不明
//document.getElementById("select***").innerHTML = result;
//ここまで
}
}
function parseCSV(str) {
var CR = String.fromCharCode(13);
var LF = String.fromCharCode(10);
var lines = str.split(LF);
var csvData = new Array();
for (var i = 0; i < lines.length; i++) {
var cells = lines[i].split(",");
if( cells.length != 1 ) csvData.push(cells);
}
return csvData;
}
function createXMLHttpRequest(cbFunc) {
var XMLhttpObject = null;
try {
XMLhttpObject = new XMLHttpRequest();
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
function getAjaxFilter() {
if (navigator.appVersion.indexOf("KHTML") > -1) {
return function(t) {
var esc = escape(t);
return (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t
}
} else {
return function(t) {
return t
}
}
}
HTML部分
<div id="select1"></div>
<div id="select2"></div>
<div id="select5"></div>
<div id="select10"></div>
No.2ベストアンサー
- 回答日時:
このケースで一番、簡単そうな解決策は、
それぞれのCSVファイルの中に、どのセレクト用なのかの
目印を書き込んでおき、それで判定だと思いますが、
それが出来ないなら、非同期通信は止めて同期通信
にして、1ファイル毎に確実に読み込む。(詳しく見てないけど)
httpObj.open("GET", path, false);
かな
それがいやなら、XHR(XmlHttpRequest)の、レスポンスヘッダーを
コールバック関数の中で自分で調べて、何への要求か見つけて
処理を分けるといったところかな。
this.getAllResponseHeaders()
どのブラウザーのXHRでも出来るかどうかは?
この回答への補足
失礼いたしました。
httpObj.open("GET", path, true);
↓
httpObj.open("GET", path, false);
に変更したらうまく動作したようです。
申し訳ないです
回答ありがとうございます。
おっしゃるとおり、普通に同期通信でやってみました。
1ファイルごとに確実に読み込めてないんだとおもいます。リロードすればひとつひとつのファイルデータが
表示されるのですが、
一回で表示できません。
恐れ入りますが、こういった場合CSVを全部読み込んでから表示する方法というのはどのように
行うのでしょうか?
ちなみに書き換えたみたコードは以下のようにしております。
<script language="javascript">
function loadCSV() {
aryCsvName = ["1","2","3","4","5","6","7","8","9","10","11","12"];
var httpObj;
for (var j = 0; j < aryCsvName.length; j++) {
var path = './data/'+aryCsvName[j]+'.csv';
httpObj = new XMLHttpRequest();
httpObj.onload = function(){
httpObj.open("GET", path, true);
httpObj.send(null);
csvData = parseCSV(httpObj.responseText);
var result = "<select name=\"select\""+ aryCsvName[j] + " onChange=\"\">";
for (var i = 0; i < csvData.length; i++) {
result += "<option value=\"" + i + "\">" + csvData[i][0] + "</option>";
}
result += "</select>";
document.getElementById("select"+ aryCsvName[j]).innerHTML = result;
}
}
}
</script>
<body onload="loadCSV()">
<div id="select1"></div>
・・・・
<div id="select12"></div>
</body>
</html>
No.3
- 回答日時:
No.1です。
無理矢理感いっぱいな気がするので参考程度に・・
loadCSV()内の
>var httpObj = createXMLHttpRequest(handleResult);
var httpObj = createXMLHttpRequest(handleResult, aryCsvName[j]);
>function handleResult() {
function handleResult(httpObj, fileName) {
if ((httpObj.readyState == 4) && (httpObj.status == 200)) {
var text = getAjaxFilter()(httpObj.responseText);
csvData = parseCSV(text);
///ここが不明
document.getElementById("select" + fileName).innerHTML = result;
//ここまで
}
}
>function createXMLHttpRequest(cbFunc) {
function createXMLHttpRequest(cbFunc, fileName) {
>if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
if (XMLhttpObject) XMLhttpObject.onreadystatechange = function() { cbFunc(XMLhttpObject, fileName); };
としたら、IE8、chrome、Firefoxでは動きました。
No.1
- 回答日時:
ぱっと見ですが・・
処理中のファイル名(配列の値)を保持する変数を用意します。
loadCsvのループの中で用意した変数 = aryCsvName[j]; とセットします
handleResultでdocument.getElementById('select'+用意した変数).innerHTML = result;
とかではダメなのですか?resultがどこにあるのかが分かりませんが・・・
というかhandleResultに引数を渡すようにすればいいだけなのか?
的外れだったらすみません。
この回答への補足
ご回答ありがとうございます。
>というかhandleResultに引数を渡すようにすればいいだけなのか?
おっしゃるとおり、var httpObj = createXMLHttpRequest(handleResult);
の部分に引数を渡すようにしてみたのです。以下のように
var httpObj = createXMLHttpRequest(handleResult(aryCsvName[j]));
すると「実装されていない」というIEのエラーがでます。
ちなみに、resultの部分ですが、以下のように実際は記述しております。
2000文字しか入らなかったので処理の部分を書きませんでした。
var result = "<select name=\"select***\" onChange=\"\">";
for (var i = 0; i < csvData.length; i++) {
result += "<option value=\"" + i + "\">" + csvData[i][0] + "</option>";
}
result += "</select>";
document.getElementById("select***").innerHTML = result;
恐れ入りますがよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
ロボットの住む世界で流行ってる罰ゲームとは?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
csvファイルを読み込み、該当項目をhtmlに表示する方法
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VSCODE[Python]の設定について
-
JavaScript/HTML5での図形の描写
-
Google Apps Script で添付ファ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
このプログラムに、王手をかけ...
-
37分間のカウンター
-
javascriptでiframeのURL変更は?
-
C#OpenCv V4にのエラーに関する...
-
翌月を取得するGASが分かりません
-
表示されている地図の大きさに...
-
FCKeditorで画像登録ができませ...
-
<a>タグのテキストを取得
-
関数でy=g(x)のgとは何の略です...
-
Linux バイナリ実行できない "...
-
オブジェクト指向のsetTimeout...
-
javascriptで行を抽出したいです。
-
form内のinputタグのみロックす...
-
Boolean型配列中のTrueの有無を...
-
お世話になります。contentedit...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報