ローカル(PC)に保存したjsonファイルをHTMLの表に表示

HTMLで作成した表に、ローカルに保存したjsonファイルを読み込み/表示を行いたいです。
インターネットで検索すると外部ファイルをtableに表示させることは、jQueryのgetJsonメソッドを利用すれば、
行えるようなのですが、ローカルに保存したファイルが出来るかがわかりません。
下記は参考にしたサイトです。
http://www.ezgate-mt.sakura.ne.jp/jquery/161.html
http://uxmilk.jp/8813

お伺いしたいことは下記の通りです。
・ローカルに保存したjsonファイルをHTMLで表示することは可能であるか。
⇒第三者にHTMLファイルとjsonファイルを渡したときに、実行できるか。

・もし、可能であれば、参考になるサイトのURLや手順などを示していただきたい。

HTMLのtable部分

<table class="sample" style="margin-top: 50px">
	<thead>
		<tr>
			<th></th>
			<th>タイトル</th>
			<th>日時</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>

	</tbody>
</table>

<table class="sample" style="margin-top: 50px">
	<thead>
		<tr>
			<th></th>
			<th>タイトル</th>
			<th>日時</th>
		</tr>
	</thead>
	<tbody id="tbody">

	</tbody>
</table>




<script
	src="C:\Json_table表示用\mnt\field\remote\aaaaa\config\instance_def.json">
			//与えられたタグ名を持つ要素のリストを返す。
			var trs = document.getElementsByTagId('tbody');

			for (var i = 0, length = JSON_DATA.length; i < length; i++) {
				var data = JSON_DATA[i], tr = trs[i], tds = tr
						.getElementsByTagName('td');

				td[1].innerText = data.file_name;
				td[2].innerText = data.update_name;
			}
		</script>

Json

{
    {
      "file_name": "aaaaa",
      "update_name": "2016/4/3/00:00:00",
      
    },
}

以上です。よろしくお願い致します。

kei344

2017/04/17 06:42

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

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

回答2件

webページを表示したタイミング「のみ」でJSONファイルを読み込む場合は、非常に簡単な方法があります。

(1)JSONに名前をつける

var JSON_DATA = {
    {
      "file_name": "aaaaa",
      "update_name": "2016/4/3/00:00:00",

    },
    ...................
}

(2)(1)のJSONが格納されたファイルをscriptタグを用いて読み込む

<hthml>
<body>
..........................
<script src="JSONファイルのパスを指定" ></script>
</body>
</html>

これだけで(1)で命名した変数名でJSONデータを参照することができます。

投稿2017/04/17 08:01

KuninoriTanaka

総合スコア93

hide09090909

2017/04/18 00:46

ご回答ありがとうございます。これはHTML内のtable等の要素に表示したい場合は、idやname等で指定することは可能なのでしょうか。

KuninoriTanaka

2017/04/18 00:53

JSONの参照とHTMLタグの参照は別物ですよ。JSONをどのような方法で参照したとしても、HTMLタグをidやnameで取得することはできます。しかし今はEcmaScriptの仕様が上がり、idやnameだけではなく、 document.querySelector() メソッドを使用すれば任意のセレクタで取得することができます。

hide09090909

2017/04/18 01:06

迅速な返信ありがとうございます。すみません、勘違いしていました。ご回答いただいた部分で、Jsonの取得を行い、別途で出力を行う記述を行えばよいのですね。

KuninoriTanaka

2017/04/18 01:18

はい、その通りです。

hide09090909

2017/04/18 01:39

可能であれば、Jsonの表示を行う記述を示して欲しいです。厚かましくてすみません。

KuninoriTanaka

2017/04/18 01:48

細かな仕様が分からないので、こんな感じで記述できますよ、というサンプルを記述しますね。 var trs = document.getElementsByTagName('tr'); for(var i = 0, length = JSON_DATA.length; i < length; i++){ var data = JSON_DATA[i], tr = trs[i], tds = tr.getElementsByTagName('td'); td[1].innerText = data.file_name; td[2].innerText = data.update_name; }

hide09090909

2017/04/18 02:43

HTMLに表を2つ配置し、Jsonの記述数(行数)により、tableの行を動的に増やすやり方を行いたい場合、どのようにすればよいでしょうか。質問文のコードを修正しました。修正点は下記の通りです。・表を2つに追加・Jsonの表示を行うtableのtbodyにidを設定・サンプルで示していただいた、部分の修正　(元)var trs = document.getElementsByTagName('tr'); 　(修正)var trs = document.getElementsByTagId('tbody'); 　不明点は2つです。下記の部分の修正内容 var data = JSON_DATA[i], tr = trs[i], tds = tr.getElementsByTagName('td'); 　⇒ tr.getElementsByTagName('td');この部分に修正が必要ではないかと考えております。　その他、修正/追加記述が必要な部分はあるか。以上です。

KuninoriTanaka

2017/04/18 03:52

実際に動かしたわけではないのでバグがあるかもしれませんが、次のように記述すれば良いと思いますよ。 var fragment = document.createDocumentFragment(), map = ['file_name', 'update_name']; for(var i = 0, length = JSON_DATA.length; i < length; i++){ var data = JSON_DATA[i], tr = document.createElement('tr'); for(var j = 0; j < 2; j++){ var td = document.createElement('td'); td.innerText = data[map[j]]; tr.appendChild(td); } fragment.appendChild(tr); } document.getElementsByTagName('tbody')[0].appendChild(fragment);

hide09090909

2017/04/18 05:04

迅速なご対応ありがとうございます。実装しても、tableにJsonファイルが表示されないため、Jsonファイルを構文チェックが行えるWEBサイト(https://syncer.jp/json-prettyprint)で確認してみると下記のエラーが表示されました。 Error: Parse error on line 1: var JSON_DATA = { Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined' 原因は分かりますでしょうか？

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