diff --git a/index.html b/index.html index 340c41a..98251a1 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +

csv.min.js使用例

@@ -16,29 +16,19 @@

CSVファイルの1行目をカラム名にしておくと、 このHTML文書内の id="__カラム名__" の中身がそれに置き換わる。

- +

- -

祭りの名称

-

- -

開催都道府県

-

- -

開催場所

-

- -

開催日時

-

- -

料金

-

- -

アニメーションデータ

-

- + +

問題

+

ここに quiz カラムの値が入る

+ +

こたえ

+

ここに answer カラムの値が入る

+ +

解説

+

ここに note カラムの値が入る

- + \ No newline at end of file diff --git a/mycsvload.js b/mycsvload.js index e1378fe..09b8b8e 100644 --- a/mycsvload.js +++ b/mycsvload.js @@ -1,53 +1,38 @@ -const http = require('http'); - -// CSVファイルの読み込み関数 -function readCSV(file, callback) { - http.get(file, (res) => { - let data = ''; - - res.on('data', (chunk) => { - data += chunk; - }); - - res.on('end', () => { - callback(data); - }); - }).on('error', (err) => { - console.error('Error:', err.message); - }); -} - -// CSVデータを処理する関数 -function processCSV(csvData) { - var lines = csvData.split("\n"); - var data = []; - - // CSVデータを配列に変換 - for (var i = 0; i < lines.length; i++) { - var row = lines[i].split(","); - data.push(row); - } - - // 操作に応じてデータを出力 - for (var j = 0; j < data.length; j++) { - if (data[j][0] === "left") { - if (j + 1 < data.length) { - console.log(data[j + 1]); - } else { - console.log("No data available."); - } - } else if (data[j][0] === "right") { - if (j - 1 >= 0) { - console.log(data[j - 1]); - } else { - console.log("No data available."); - } +(() => { + var quiz = [], // 読み取ったCSV全てが入る配列 +nQuiz, // データの個数(quiz.lengthのまま使ってもよい) +pos=0; // 現在の配列の添字位置 + var csvfile = "data.csv"; // CSVデータファイル名 + function putValues(row) { +// CSVの1行分のJSONがrowに入る +for (let key of Object.keys(row)) { + // Object.keys(JSON)でキーを1個ずつ取り出す(Rubyのkeys) + let id = "__" + key + "__"; // HTML要素のID + let elem = document.getElementById(id); + if (elem) { // もし id="__カラム名__" の要素が見つかったら + elem.innerText = row[key]; // その要素の内部テキストを更新 } - } } - -// CSVファイルのURL -var csvURL = "csv/data.csv"; - -// CSVファイルの読み込みと処理の呼び出し -readCSV(csvURL, processCSV); + } + function slide(n) { // nで指定した数だけ現在位置(pos)をずらす +pos = (nQuiz+pos+n) % nQuiz; // 0以上 nQUIZ以下 になるよう調整 +putValues(quiz[pos]); // ずらした添字位置で文書書き換え + } + function left() {slide(-1);} // 1つ前に戻るボタンの処理 + function right() {slide(1);} // 1つ先に進むボタンの処理 + function init() { // HTML文書を読み終わったら呼ばれる +fetch(csvfile). // csvfileをサーバから読み込んで + then((resp) => { // 応答がrespに入るので + if (resp.ok) return resp.text(); // テキストを返す + }).then((txt) => { // テキストが txt に入るので + quiz = new CSV(txt, {header: true}).parse(); // CSV解析 + nQuiz = quiz.length; // 行数を記憶 + putValues(quiz[pos]); // 最初の行のデータを表示 + });; +document.getElementById("left").addEventListener("click", left); +document.getElementById("right").addEventListener("click", right); + } + document.addEventListener("DOMContentLoaded", ()=>{ +init(); // ブラウザの文書読み込みが完了したらここに来る + }, false); +})(); \ No newline at end of file