javascriptでCSVを読み込み表示する方法を探しています。

質問

javascriptでCSVを読み込み表示する方法を探しています。

<div id="hoge">
<ul class="hogehoge">
<li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li>
<li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li>
・
・
・
</ul>
</div>

で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・
（ulのところのCSS指定は、idではなく、classにしたいです）

よろしくお願いいたします。

回答No.4

think49

以下、要求仕様に合わない部分は適宜書き換えてください。(※全角空白は半角空白に置換)

gist: 606500 - (rfc4180.js) - GitHub
http://gist.github.com/606500

---
var csv;
csv = new RFC4180(true);
csv.fileToArray('http://example.com/test.csv', function (array) {
　var doc, ul, li, a, textNode;

　doc = document;
　ul = doc.createElement('ul');
　li = doc.createElement('li');
　a = li.appendChild(doc.createElement('a'));
　textNode = a.appendChild(doc.createTextNode(''));

　for (var i = 0, l = array.length; i < l; i++) {
　　a.href = array[i][0];
　　textNode.nodeValue = array[i][1];
　　ul.appendChild(li.cloneNode(true));
　}
　doc.body.appendChild(ul);
});
---

回答No.3

yyr446

まず、javascriptにクライアント側のファイルを入出力する機能はありません。
読み込むなら、csvファイルをサーバー側に置き、AJAX(XMLHttpRequest)で
テキストデータとして読み込みます。
　AJAXレスポンスデータ(テキスト型式)をカンマと改行文字で分割して、
配列変数にいったん格納し、DOM APIのループ処理でli要素を作成しつつ
ターゲットの<ul>の子要素として追加していけばよいかと思います。

データを予めCSV型式からJSON型式にしておけば、分割・格納の処理が
省けますから、もうちょっと楽になります。
JSON型式↓

{data:[
['1行目の1つ目のデータ','1行目の2つ目のデータ'],
['2行目の1つ目のデータ','2行目の2つ目のデータ'],
....
['n行目の1つ目のデータ','n行目の2つ目のデータ']
]};

となってれば、
json.data[0][0] //1行目の1つ目のデータ
json.data[0][1] //1行目の2つ目のデータ
json.data[1][0] //2行目の1つ目のデータ
json.data[1][1] //2行目の2つ目のデータ
....
json.data[n][0] //n行目の1つ目のデータ
json.data[n][1] //n行目の2つ目のデータ
ですから、HTML生成の部分は、

function listadd(json){
var ul = document.querySelector("ul.hogehoge");
for(var i=0;i<json.data.length;i++){
var li = document.createElement("li");
var a = document.createElement("a");
a.href = json.data[i][0];
a.appendChild(document.createTextNode(json.data[i][1]));
li.appendChild(a);
ul.appendChild(li);
}
}

ajaxの部分は、

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","xxx.json",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var json = eval("("+xmlhttp.responseText+")");
listadd(json);
}
}

でよいかと。
※古いIEの時は、
document.querySelectorとか new XMLHttpRequest()
を適時書き換えてくだされ。

回答No.2

fujillin

Ｎｏ1です。

cvs　→　csv　のタイポです。おはずかしい。

回答No.1

fujillin

ajax cvs　あたりをキーにぐぐってみれば、ヒントがいろいろ見つかることでしょう。

たいていのものは、cvsを表形式に表示したり、データをソートしたり、検索するなどのtableデータを対象とする操作になっていると思います。
ご質問の場合は、cvsといってもそのような表ではなさそうなので、前半の読込みだけを利用して、表示するのにはtableの要素の代わりにli要素を生成すればよろしいかと。