質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

28940閲覧

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

hide09090909

総合スコア68

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/04/17 06:37

編集2022/01/12 10:55

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", }, }

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/04/17 06:42

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

回答2

0

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の取得を行い、別途で出力を行う記述を行えばよいのですね。
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' 原因は分かりますでしょうか?
guest

0

以前と同じURLを参考にした回答ですが

  • Firefox、IE、Edge→<object><iframe>経由でアクセス可能
  • Chrome→起動時の引数を変更する必要がある(実質、他人に配布するものではやるべきでない

投稿2017/04/17 06:56

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問