JavaScriptで複数のCSVを取得し１つのselectフォームを表示する方法

2010/09/12 12:08

このQ&Aのポイント

JavaScriptを使用して、複数のCSVを取得し、それぞれのCSVごとに1つのselectフォームを表示する方法についてご教授ください。
aryCsvName配列にはいっている名前のCSVを取得し、getElementByIdでselectフォームに表示したいのですが、上手く値を取得できません。
loadCSV関数を使用してaryCsvName配列に格納されたCSVのパスを取得し、createXMLHttpRequest関数でHTTPリクエストを送信し、handleResult関数でレスポンスを処理しています。selectフォームにCSVの内容を表示する方法を教えてください。

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>

titikun00
お礼率48% (60/125)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/09/13 11:02 回答No.2

このケースで一番、簡単そうな解決策は、それぞれのCSVファイルの中に、どのセレクト用なのかの目印を書き込んでおき、それで判定だと思いますが、それが出来ないなら、非同期通信は止めて同期通信にして、１ファイル毎に確実に読み込む。（詳しく見てないけど）　httpObj.open("GET", path, false); かなそれがいやなら、XHR(XmlHttpRequest)の、レスポンスヘッダーをコールバック関数の中で自分で調べて、何への要求か見つけて処理を分けるといったところかな。　this.getAllResponseHeaders() どのブラウザーのXHRでも出来るかどうかは？

質問者

お礼 2010/09/13 14:01

回答ありがとうございます。おっしゃるとおり、普通に同期通信でやってみました。 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:13

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yamada_g
ベストアンサー率68% (258/374)

2010/09/13 15:18 回答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では動きました。

ログインすると、全ての回答が全文表示されます。

yamada_g
ベストアンサー率68% (258/374)

2010/09/13 10:35 回答No.1

ぱっと見ですが・・処理中のファイル名（配列の値）を保持する変数を用意します。 loadCsvのループの中で用意した変数 = aryCsvName[j]; とセットします handleResultでdocument.getElementById('select'+用意した変数).innerHTML = result; とかではダメなのですか？resultがどこにあるのかが分かりませんが・・・というかhandleResultに引数を渡すようにすればいいだけなのか？的外れだったらすみません。

質問者

補足 2010/09/13 11:52

ご回答ありがとうございます。 >というか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; 恐れ入りますがよろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。