JavaScriptで複数のCSVを取得しひとつのCSVごとに１つのs

JavaScriptで複数のCSVを取得しひとつのCSVごとに１つの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 回答者： yamada_g 回答日時： 2010/09/13 10:35

ぱっと見ですが・・

処理中のファイル名（配列の値）を保持する変数を用意します。
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;

恐れ入りますがよろしくお願いいたします。

補足日時：2010/09/13 11:52

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/09/13 11:02

このケースで一番、簡単そうな解決策は、

それぞれのCSVファイルの中に、どのセレクト用なのかの
目印を書き込んでおき、それで判定だと思いますが、
それが出来ないなら、非同期通信は止めて同期通信
にして、１ファイル毎に確実に読み込む。（詳しく見てないけど）
　httpObj.open("GET", path, false);
かな

それがいやなら、XHR(XmlHttpRequest)の、レスポンスヘッダーを
コールバック関数の中で自分で調べて、何への要求か見つけて
処理を分けるといったところかな。

　this.getAllResponseHeaders()

どのブラウザーのXHRでも出来るかどうかは？

この回答への補足

失礼いたしました。
httpObj.open("GET", path, true);
↓
httpObj.open("GET", path, false);
に変更したらうまく動作したようです。

申し訳ないです

　

補足日時：2010/09/13 14:13

この回答へのお礼

回答ありがとうございます。

おっしゃるとおり、普通に同期通信でやってみました。
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>

お礼日時：2010/09/13 14:01

No.3 回答者： yamada_g 回答日時： 2010/09/13 15:18

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では動きました。