JSONを使用して画面いっぱいに表を表示したいのですが表示されません

自分がやりたいことは添付している画像のようにしたいと思っており、作成ボタンを押下したら表を表示し削除ボタンを押下したら消えるようにしたいです。画像は配列で表示したものです。

ですが作成ボタンを押下しても何も表示されません。
原因がわからないため教えていただきたいです。
コードは下記になります

よろしくお願いします。

HTML
1    <!DOCTYPE html>
2    <html>
3    <head>
4        <meta charset="UTF-8">
5    </head>
6    <body>
7        <style>
8            body {
9                background-color: #FFFF66;
10            }
11            input {
12                margin: 1em;
13            }
14
15            table {
16                width: 100%;
17                border-collapse: collapse;
18                border: 1px solid gray;
19                background-color: #CCFFFF;
20            }
21
22                table td {
23                    border: 1px solid gray;
24                    padding: 4px;
25                }
26
27        </style>
28        <input type="button" value="作成" onclick='makeTable( data,"table" )'>
29        <input type="button" value="削除" onclick='del("table")'>
30        <div id="table"></div>
31        <script src="./練習.js" type="text/javascript" charset="shift_jis"></script>
32        <script src="./練習.json" type="text/javascript" charset="shift_jis"></script>
33    </body>
34</html>
35

JSON
1{
2  "table": [
3    {
4      "社員番号": "1",
5      "姓": "山田",
6      "名": "太郎",
7      "年齢": "20",
8      "住所": "東京都葛飾区亀有公園１丁目"
9    },
10    {
11      "社員番号": "2",
12      "姓": "山田",
13      "名": "太郎",
14      "年齢": "21",
15      "住所": "東京都葛飾区亀有公園２丁目"
16    },
17    {
18      "社員番号": "3",
19      "姓": "山田",
20      "名": "太郎",
21      "年齢": "22",
22      "住所": "東京都葛飾区亀有公園３丁目"
23    },
24    {
25      "社員番号": "4",
26      "姓": "山田",
27      "名": "太郎",
28      "年齢": "23",
29      "住所": "東京都葛飾区亀有公園４丁目"
30    },
31    {
32      "社員番号": "5",
33      "姓": "山田",
34      "名": "太郎",
35      "年齢": "24",
36      "住所": "東京都葛飾区亀有公園５丁目"
37    },
38    {
39      "社員番号": "6",
40      "姓": "山田",
41      "名": "太郎",
42      "年齢": "25",
43      "住所": "東京都葛飾区亀有公園６丁目"
44    },
45    {
46      "社員番号": "7",
47      "姓": "山田",
48      "名": "太郎",
49      "年齢": "26",
50      "住所": "東京都葛飾区亀有公園７丁目"
51    },
52    {
53      "社員番号": "8",
54      "姓": "山田",
55      "名": "太郎",
56      "年齢": "27",
57      "住所": "東京都葛飾区亀有公園８丁目"
58    },
59    {
60      "社員番号": "9",
61      "姓": "山田",
62      "名": "太郎",
63      "年齢": "28",
64      "住所": "東京都葛飾区亀有公園９丁目"
65    },
66    {
67      "社員番号": "10",
68      "姓": "山田",
69      "名": "太郎",
70      "年齢": "29",
71      "住所": "東京都葛飾区亀有公園１０丁目"
72    },
73    {
74      "社員番号": "11",
75      "姓": "山田",
76      "名": "太郎",
77      "年齢": "30",
78      "住所": "東京都葛飾区亀有公園１１丁目"
79    },
80    {
81      "社員番号": "12",
82      "姓": "山田",
83      "名": "太郎",
84      "年齢": "31",
85      "住所": "東京都葛飾区亀有公園１２丁目"
86    },
87    {
88      "社員番号": "13",
89      "姓": "山田",
90      "名": "太郎",
91      "年齢": "32",
92      "住所": "東京都葛飾区亀有公園１３丁目"
93    },
94    {
95      "社員番号": "14",
96      "姓": "山田",
97      "名": "太郎",
98      "年齢": "33",
99      "住所": "東京都葛飾区亀有公園１４丁目"
100    },
101    {
102      "社員番号": "15",
103      "姓": "山田",
104      "名": "太郎",
105      "年齢": "34",
106      "住所": "東京都葛飾区亀有公園１５丁目"
107    },
108    {
109      "社員番号": "16",
110      "姓": "山田",
111      "名": "太郎",
112      "年齢": "35",
113      "住所": "東京都葛飾区亀有公園１６丁目"
114    },
115    {
116      "社員番号": "17",
117      "姓": "山田",
118      "名": "太郎",
119      "年齢": "36",
120      "住所": "東京都葛飾区亀有公園１７丁目"
121    },
122    {
123      "社員番号": "18",
124      "姓": "山田",
125      "名": "太郎",
126      "年齢": "37",
127      "住所": "東京都葛飾区亀有公園１８丁目"
128    },
129    {
130      "社員番号": "19",
131      "姓": "山田",
132      "名": "太郎",
133      "年齢": "38",
134      "住所": "東京都葛飾区亀有公園１９丁目"
135    },
136    {
137      "社員番号": "20",
138      "姓": "山田",
139      "名": "太郎",
140      "年齢": "39",
141      "住所": "東京都葛飾区亀有公園２０丁目"
142    }
143  ]
144}
145

JavaScript
1function del(tableId) {　
2    document.getElementById(tableId).innerHTML = "";
3}
4
5function makeTable(data, tableId) {
6    var table = document.createElement("table");
7
8    for (i = 0; i < data.length; i++) {
9        var row = table.insertRow(-1);
10        for (j = 0; j < data[0].length; j++) {
11            cell = row.insertCell(-1);
12            cell.appendChild(document.createTextNode(data[i][j]));
13        }
14    }
15
16    document.getElementById(tableId).appendChild(table);
17}
18

yambejp

2022/09/20 10:28

Funap_1318

2022/09/20 10:34

よいです。表示できればいいと思っているので…

m.ts10806

2022/09/20 10:42

定義されてないdataという変数がいきなり突っ込まれてる時点で動かないと思いますが、何を参考に書かれたのですか？エラー確認してませんか？（ブラウザ開発ツールのコンソール）

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

回答1件

ベストアンサー

javascript
1<style>
2body {
3  background-color: #FFFF66;
4}
5input {
6margin: 1em;
7}
8table {
9width: 100%;
10border-collapse: collapse;
11border: 1px solid gray;
12background-color: #CCFFFF;
13}
14table td {
15border: 1px solid gray;
16padding: 4px;
17}
18</style>
19<script>
20window.addEventListener('DOMContentLoaded', ()=>{
21  del.addEventListener('click',()=>{
22    tbl.innerHTML = "";
23  });
24  create.addEventListener('click',async()=>{
25    del.click();
26    const data=await fetch('sample.json').then(res=>res.json()).then(x=>x.table);
27    const table=`<table><tbody>${data.map(x=>`<tr>${Object.values(x).map(x=>`<td>${x}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
28    tbl.innerHTML=table;
29  });
30});
31</script>
32<input type="button" value="作成" id="create">
33<input type="button" value="削除" id="del">
34<div id="tbl"></div>

jsonファイルのドラッグアンドドロップでテーブル表示

こんな感じで

javascript
1<style>
2#droppable {
3border: gray solid 1em;
4display: block;
5padding: 2px 1em;
6position: relative;
7height:100px;
8}
9#droppable input[type="file"] {
10background-Color:red;
11height: 100%;
12left: 0px;
13top: 0px;
14position: absolute;
15width: 100%;
16opacity: 0;
17}
18body {
19  background-color: #FFFF66;
20}
21input {
22margin: 1em;
23}
24table {
25width: 100%;
26border-collapse: collapse;
27border: 1px solid gray;
28background-color: #CCFFFF;
29}
30table td {
31border: 1px solid gray;
32padding: 4px;
33}
34</style>
35<script>
36window.addEventListener('DOMContentLoaded', ()=>{
37  del.addEventListener('click',()=>{
38    tbl.innerHTML = "";
39  });
40  document.querySelector('[type=file]').addEventListener('change',e=>{
41    const file = e.target.files[0];
42    const fr = new FileReader();
43    fr.onload = e=>{
44      const data=JSON.parse(e.target.result).table;
45      const table=`<table><tbody>${data.map(x=>`<tr>${Object.values(x).map(x=>`<td>${x}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
46      tbl.innerHTML=table;
47    }
48    fr.readAsText(file);
49  });
50});
51</script>
52<form method="post" action="y.php" enctype="multipart/form-data">
53<div id="droppable"><div>ドロップして</div>
54<input type="file" name="userfile" accept="application/json">
55</div>
56<input type="button" value="削除" id="del">
57<div id="tbl"></div>
58</form>

作成ボタンをクリックしたらファイル選択画面が表示される

ファイルのドラッグアンドドロップはUI的にNGということなので以下

javascript
1<style>
2input[type="file"] {
3display:none;
4}
5body {
6  background-color: #FFFF66;
7}
8input {
9margin: 1em;
10}
11table {
12width: 100%;
13border-collapse: collapse;
14border: 1px solid gray;
15background-color: #CCFFFF;
16}
17table td {
18border: 1px solid gray;
19padding: 4px;
20}
21</style>
22<script>
23window.addEventListener('DOMContentLoaded', ()=>{
24  del.addEventListener('click',()=>{
25    tbl.innerHTML = "";
26    document.querySelector('[type=file]').value="";
27  });
28  create.addEventListener('click',()=>{
29    del.click();
30    document.querySelector('[type=file]').click();
31  });
32  document.querySelector('[type=file]').addEventListener('change',e=>{
33    const file = e.target.files[0];
34    const fr = new FileReader();
35    fr.onload = e=>{
36      const data=JSON.parse(e.target.result).table;
37      const table=`<table><tbody>${data.map(x=>`<tr>${Object.values(x).map(x=>`<td>${x}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
38      tbl.innerHTML=table;
39    }
40    fr.readAsText(file);
41  });
42});
43</script>
44<form method="post" enctype="multipart/form-data">
45<input type="file" name="userfile" accept="application/json">
46<input type="button" value="作成" id="create">
47<input type="button" value="削除" id="del">
48<div id="tbl"></div>
49</form>

投稿2022/09/20 10:44

編集2022/09/21 08:56

yambejp

総合スコア114777

Funap_1318

2022/09/20 11:01

fetch以外で表示する方法はあるのでしょうか

yambejp

2022/09/20 11:03

> fetch以外 XHR(ajax)で同様のことができますが、ちょっと古い技術なので処理が面倒です

Funap_1318

2022/09/20 11:20

ありがとうございます。記述していただいたコードはローカルのファイル（Cとかデスクトップとかに保存しているもの）でもできるのでしょうか

yambejp

2022/09/21 00:17

> ローカルのファイルローカルのファイルにアクセスすることは原則できません

Funap_1318

2022/09/21 01:23

ローカルのファイルにアクセスする方法はありますか？

yambejp

2022/09/21 01:30 編集

原則webからローカルのファイルにアクセスすることはできません（任意にアップロードすれば別）クラウドでファイルを管理してもセキュリティレベルを相当さげないと厳しいですね質問の内容からすると質問者さんはITスキルがあまり高くないように見受けられます。当座「できない」という認識で作業されたほうが良いと思います

Funap_1318

2022/09/21 01:57

分かりました。ありがとうございます。少し調べてみたのですが Jqueryを使うとローカルのファイルを読み込むことができるという記事を見つけたのですが jqueryは読み込むだけで表示はできないのでしょうか

yambejp

2022/09/21 02:08

> Jqueryを使うとローカルのファイルを読み込むことができるという記事おそらくガセですがそれは具体的にどの記事でしょう？

Funap_1318

2022/09/21 02:15

https://pisuke-code.com/javascript-load-local-json-file/ 上記記事になります。

yambejp

2022/09/21 02:34

「Chromeで --disable-web-security を付けて起動」は特殊な方法なのでおすすめはできません「JSONをローカルのjsファイルから読み込み」はjsonファイルを読んでいるわけではないのでまったく意味がありませんいずれにしてもローカルから普通にJSONを読む方法ではありません