Pythonから受け取った配列をjavascriptでtable化する方法

実現したいこと

①htmlからfoamでPythonへcsvデータの受渡
②Pythonでcsvデータをリスト化、変数に渡す
③リスト化されたデータをhtmlで受取
④javascriptでリスト化されたデータを受け取り、加工、htmlのtableに反映

④のデータを受け取るまではできたのですが、生のデータが見ずらいため、
htmlでテーブル化をしてデータを見やすくしたいです。
調べてもhtmlのthタグは自分で設定してtdタグのみをテーブル化しているものが多く、
記事が見つからず、自分でもいろいろ試しましたがうまくいかなかったため質問させていただきます。

前提

title_listをthタグに設定、
detail_listをtdタグに設定をしてデータを綺麗に表示させたいと思っています。
添付のソースコードを実行した時、以下のようにエラーメッセージが表示されます。

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

エラーメッセージ Uncaught TypeError: element.forEach is not a function

該当のソースコード

Python

1import re, sys 2import pandas 3from flask import Flask, request,render_template 4app = Flask(__name__)5 6@app.route("/")7def hello():8 return render_template('index.html')9 10@app.route('/test', methods=['POST'])11def post():12 test = request.files.get('file')13 data = pandas.read_csv(test,encoding="shift-jis")14 15 data_list = data.to_numpy().tolist()16 data_title = data.columns.to_list()17 18 return render_template('get.html',list=data_list,title=data_title)19 20 21if __name__ == "__main__":22 app.debug = True23 app.run()24 # app.run(host='0.0.0.0', port=80)25

HTML

1{% extends "layout.html" %} 2{% block content %} 3 4<p>{{ list }}</n>{{ title }}</p> 5<table id="output"></table> 6 7<script> 8 9var detail_list = {{list|tojson}} 10var title_list = {{title|tojson}} 11 12let output =document.getElementById("output"); 13function htmlWrite(title,detail){ 14 let insert =""; 15 title.forEach(element => { 16 insert +='<tr>'; 17 element.forEach((childElement) =>{ 18 insert +=`<th>${childElement}</th>`; 19 }); 20 insert +='</tr>' 21 }); 22 detail.forEach(element => { 23 insert +='<tr>'; 24 element.forEach((childElement) =>{ 25 insert +=`<td>${childElement}</td>`; 26 }); 27 insert +='</tr>' 28 }); 29 30 //HTMLに出力 31 output.innerHTML = insert; 32} 33htmlWrite(title_list,detail_list) 34</script> 35 36{% endblock %} 37

試したこと

htmlWrite(title_list,detail_list)を
片方ずつ試したところ、
htmlWrite(detail_list)はうまく表示されましたが、
htmlWrite(title_list)を試したときhtmlWrite(title_list,detail_list)を実行した場合と同じエラーメッセージが表示されたため、
title_listがうまく配列型に出来ていないのが原因だと思っているのですが、原因が解決できず困っています。

ご教示お願いいたします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント