htmlでオープンデータを使用したい

htmlで新潟県のオープンデータの人口などを使いたいと思ったのですが、htmlのなかになんと記述すればいいのか全くわからず...どのようにしたらいいのか教えていただきたいです。

使いたい新潟の人口オープンデータ先
http://www.city.niigata.lg.jp/shisei/seisaku/it/open-data/opendata-toukei/od-jinkou/od-suikeijinkou.html

行動規範の内容に同意します

回答3件

どう使いたいのか、どの部分のコードを自分で書きたいのかがわかりませんが、ただ変換するだけであれば下記のようなWebツールもあります。

【CSV→<table>変換】
http://tools.nissuk.info/csv-table/

JavaScript のコードサンプルが欲しければ探せば出てくると思います。

【JavaScript でcsvをtableに変換する - Qiita】
http://qiita.com/hirotyjp/items/06aa7230aa51d57388f1

【JavascriptでtableをCSVにしてみる |】
http://blog.adjust-work.com/970/

ライブラリが必要ならばjQueryとからめて検索すると出て来やすいかと思います。

【Googleスプレッドシートのようなjqueryプラグイン - Qiita】
http://qiita.com/mogetarou/items/8f11927130c2cf5cebb7

投稿2016/09/05 07:52

kei344

総合スコア69407

ken_66

2016/09/06 04:36

返信遅くなり申し訳ありません。リンク先見てみたいと思います！ありがとうございます！

行動規範の内容に同意します

どう使いたいのでしょうか？
そのままデータを表示するなら、CSVファイルをダウンロードして、HTMLのTABLEの形式に書き換えればいいかと思います。

投稿2016/09/05 06:45

otn

総合スコア84555

ken_66

2016/09/05 06:52

とりあえずはデータを表示することをやりたいと思っています。 otnさんが書かれているCSVファイルをダウンロードして、HTMLのTABLEの形式に書き換えるとはどのように記述すればよいのでしょうか？よろしければだだ表示するだけでいいので記述の仕方をやってみていただけないでしょうか...？よろしければよろしくお願いいたします。

otn

2016/09/05 09:59

> ABLEの形式に書き換えるとはどのように記述すればよいのでしょうか？ HTMLを書いたことがないと言うことでしょうか？まずはそこから勉強されたほうがいいかとおもいます。

行動規範の内容に同意します

ベストアンサー

ちょっと私も勉強がてらにやってみました
同じフォルダにリンク先のcsvデータをダウンロードしての実行ですが。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script>
function csvget(){
    var src = new XMLHttpRequest();
    src.open("get", "2015suikeijinkou.csv", true);
    src.send(null);
    src.onload = function(){tbl(src.responseText);}
}
function tbl(wcsv){
  /* document.getElementById("kekka").innerHTML=wcsv; */
  gyo = wcsv.split("\n");
  w="<table border='1'>";
  for(var i=0; i<gyo.length-1; i++){
     itm=gyo[i].split(",");
     w=w+"<tr><td>"+itm[1]+"</td><td>"+itm[2]+"</td><td>"+itm[3]+"</td><td>"+itm[6]+"</td></tr>";
  }
  w=w+"</table>";
  document.getElementById("kekka").innerHTML=w;
}
</script>
csv表示
<form>
<input type="button" value="読み取り" onclick="csvget();">
</form>
<div id="kekka">結果</div>
</body>
</html>