- 締切済み
txtファイルを読み込んでWeb上で自動作表したい
本日２月２０日は、西郷輝彦さんの命日です。 当方は、彼の歌が好きで、歌のリストを作りました。 このテキストファイルをHTMLで読み込んで、 Web上で自動作表したいと思っています。 条件は、次のとおりです。 ・ローカル環境でできること ・OBJECTタグ、または、IFRAMEタグに読み込む ・JavaScriptでコーディングする ・読み込むファイルの例は次のとおり 曲名 発売日 チャペルに続く白い道 1964.04.15 星空のあいつ 1964.06.01 潮風が吹きぬける町 1967.10.01 JavaScriptに詳しいかたにご教示願いたく、 よろしくお願いいたします。
- retorofan
- お礼率86% (336/388)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
何かのアクションを興してからでないと、ローカルフィルは読めません。 object要素に読み込んでブラウザ上に表示されていても、テキストは取得できません。 一応、tab区切りでも可能にしてあったのですが・・・。
- babu_baboo
- ベストアンサー率51% (268/525)
回答が付きませんね。 曲名のファイル(list.js)は、次の構造にして拡張子は ".js" にします。 ----この下から---- const LIST=` 曲名 発売日 チャペルに続く白い道 1964.04.15 星空のあいつ 1964.06.01 潮風が吹きぬける町 1967.10.01 ` ----この行の上の行まで---- ※全角空白文字を、それで区切ったり、インデントとに使ったり、 文字列の最後に余計に付加したりと、それが面倒にしています。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <table id="hoge" border="1"></table> <script src="list.js"></script> <script> const ary2tbody=(a,b=document.createElement('tbody'))=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b), str2Ary=s=>s.trim().split(/\n/g).map(r=>r.trim().replace(/^(\s+|\u3000+)|(\s+|\u3000+)$/,'').split(/\t|\u3000+|\x20+|,/g)); ary2tbody (str2Ary (LIST), hoge); </script>
お礼
playlist.txt の内容を JavaScriptの変数にしての 作表では、目的に叶いません。 また、OBJECTタグ、またはIFRAMEタグは 作表のための必須条件ではありません。 それらのタグにテキストファイルを読み込んで 作表できたら・・・。そう考えただけです。 結局、new FileReader で読み込んで TR, TH,TDを生成する作表関数で実現出来ました。 この度、回答された方には厚く御礼申し上げます。
補足
質問の趣旨は、 １．次のようなタブ区切りのテキストファイルがある。 曲名 発売日 チャペルに続く白い道 1964.04.15 星空のあいつ 1964.06.01 潮風が吹きぬける町 1967.10.01 ２．この「playlist.txt」を読み込んだら自動作表する JavaScriptのコードのサンプルを知りたい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Objectタグに読み込んだデータをJavaScriptで表に変える</title> <style> object { border: solid 1px gray; } </style> </head> <body> <h1>Objectタグに読み込んだデータをJavaScriptで表に変える</h1> <object data="./playlist.txt" width="400" height="200"></object> <script> //作表するコード document.addEventListener('DOMContentLoaded', makeTable); function makeTable(){ // } </script> </body> </html>
お礼
ご回答ありがとうございました。