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.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;
恐れ入りますがよろしくお願いいたします。
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では動きました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アクセス時からのカウントダウ...
-
pdfに丸秘などのスタンプを...
-
javaScriptのコードの修正をお...
-
C#OpenCv V4にのエラーに関する...
-
gas スプレッドシートがアクテ...
-
船のゲームを作っているのです...
-
JavaScriptでテーブル内?に矢...
-
このスクリプトにアレンジを加...
-
ジェネレーターの作り方
-
ショッピングカートをついてこ...
-
イベントが初めの一回しか起き...
-
google apps scriptの終了のさせ方
-
html javascript リンク先アド...
-
HTMLで作った時報アプリが動き...
-
択一形式のテストをつくりたいです
-
jqGridについて
-
GASでundefinedエラーが出ます
-
HTMLにWSHを組み込む
-
getElementByIdでASP.NETのText...
-
特定のclassを表示、非表示にする
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報