javascriptでのファイル読み込みと読み込んだ値をwebブラウザに表示させる方法

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • 指定のフォルダにあるCSVファイルをjavascriptを使って読み込む。
  • 読み込んだものを配列に格納する。
  • 格納した値をwebブラウザにHTML,CSSを用いて表示する。

前提

現在、javascript,HTML,CSSを用いてプログラムを作成しているのですが、ファイル読み込みでnode.jsを使用し、読み込んだ値をwebブラウザに反映させれるか試そうとしたら、node.jsを使っていたら無理だと判明したので今回質問させて貰いました。

発生している問題・エラーメッセージ

document.write(set_count); ^ ReferenceError: document is not defined

該当のソースコード

set.js

1let fainal_time = 0; //計算後の待ち時間 2let set_count = 0; //定食の注文数 3var csvArray= []; // データを入れるための配列 4 5function getCSV(){ 6 const fs = require('fs'); 7 let text = fs.readFileSync("C:\\Users\\kameikouhei\\Desktop\\卒業研究\\プログラム\\dummy_data.csv", 'utf-8'); 8 //console.log(text); 9 convertCSV(text); 10} 11 12function convertCSV(csvfail){ 13 console.log(csvfail); 14 var tmp = csvfail.split("\n"); // 改行を基準にデータを行ごとで配列化 15 // 各行ごとにカンマで区切った文字列の配列データを生成 16 for(var i = 0; i < tmp.length; i++){ 17 var tmpROW = tmp[i].split(','); 18 if( tmpROW !== '' ){ 19 csvArray[i] = tmp[i].split(','); 20 } 21 } 22 console.log(csvArray[0]); 23} 24 25// csvファイルの読み込みを実行 26getCSV(); 27console.log(csvArray[0]); 28for(var i = 0; i<csvArray.length; i++){ 29 if(csvArray == "定食"){ 30 set_count++; 31 } 32} 33 34 35document.write(set_count);

main.html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>食堂の混雑状況</title> 6 <link rel="stylesheet" href="main.css"> 7 </head> 8 9 <body> 10 <div class="header">各メニューの待ち時間</div> 11 12 <div class="main"> 13 <div class="main-item"> 14 <tr> 15 <td>定食</td> 16 <span> <script src="set.js"></script></span> 17 </tr> 18 </div> 19 <div class="main-item"> 20 21

コメントを投稿

0 コメント