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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

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

Q&A

解決済

3回答

3349閲覧

HTMLのhead内からJSONを呼び出す方法

hibikikudo

総合スコア238

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/10/27 03:03

###前提・実現したいこと
下記の外部JSONファイルを呼び出すコードを修正して、HTMLのhead内からJSONを呼び出したいのですが、この方法がわかりません。
HTMLのhead内からJSONを呼び出す方法をご教示いただけないでしょうか?

###該当のソースコード

HTML

1<head> 2<script id="tagJson" type="application/json"> 3{ 4 "key": [{ 5 "Tom": { 6 "label": "Dick", 7 "data": "20", 8 "selected": true, 9 "value": [ 10 { 11 "label": "Harry", 12 "data": "all", 13 "selected": true 14 }, 15 { 16 "label": "Bob", 17 "data": "7d", 18 "selected": false 19 } 20 ] 21 } 22 }] 23} 24</script> 25</head> 26<body> 27 <select id="tagKey"></select> 28</body>

javascript

1$(function () { 2var tagObj = new Object; 3 $.getJSON("json/tag.json", function (selTagKey) { 4 var _key = selTagKey.key; 5 tagObj = selTagKey; 6 for (var i in _key) { 7 for (var n in _key[i]) { 8 var test = _key[i][n]; 9 var options = $('<option></option>', { 10 text: test.label, 11 "value": test.data, 12 "selected": test.selected 13 }); 14 $("#tagKey").append(options); 15 for (var v in _key[i][n]['value']) { 16 var _val = _key[i][n]['value'][v]; 17 var child_options = $('<option></option>', { 18 text: _val.label, 19 "value": _val.data, 20 "selected": _val.selected 21 }); 22 } 23 } 24 }; 25 $("#tagKey").change(); 26 }); 27});

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

idで取得してからjsonでパースしてあげればよいかと

javascript

1var selTagKey = $.parseJSON($('#tagJson').html());

(追記)
コード全体だとこうですかね... 使ってない変数とか消しちゃいました

javascript

1$(function () { 2 var selTagKey = $.parseJSON($('#tagJson').html()); 3 var _key = selTagKey.key; 4 for (var i in _key) { 5 for (var n in _key[i]) { 6 var test = _key[i][n]; 7 var options = $('<option></option>', { 8 text: test.label, 9 "value": test.data, 10 "selected": test.selected 11 }); 12 $("#tagKey").append(options); 13 for (var v in _key[i][n]['value']) { 14 var _val = _key[i][n]['value'][v]; 15 var child_options = $('<option></option>', { 16 text: _val.label, 17 "value": _val.data, 18 "selected": _val.selected 19 }); 20 } 21 } 22 }; 23 $("#tagKey").change(); 24});

投稿2016/10/27 03:15

編集2016/10/27 03:29
popobot

総合スコア6586

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

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

hibikikudo

2016/10/27 03:26

回答ありがとうございます。JSファイルの冒頭部を var selTagKey = jQuery.parseJSON($('#tagJson').html()); var tagObj = new Object; $.getJSON(selTagKey, function () { ..... ということでしょうか?
popobot

2016/10/27 03:29

回答欄に追記しました。あまりループ内の処理はそのままなのでみていませんが...。
hibikikudo

2016/10/27 03:37

ありがとうございます。こちらの方法で動かすことができました!感謝いたします。
hibikikudo

2016/10/27 03:51

追加の質問です。 この修正により $("#tagKey").change(); が効かなくなってしまったのですが、どのように修正するべきでしょうか?
popobot

2016/10/27 04:08

何がしたいコードなのかよくわかりません...。何が効かないのでしょうか?
hibikikudo

2016/10/27 04:15

↑私の最後の質問は、下記を追記にて解決 setTimeout(function(){ $("#tagKey").change(); }, 0); JSONを外部ファイルからHTML内への記述に変更したことにより、読み込みのタイミングが変化したことが原因でした。JSに遅延処理を追記し解決しました。
guest

0

javascript

1{ 2 "key": [{ 3 "Tom": { 4 "label": "Dick", 5 "data": "20", 6 "selected": true,

javascript

1var json_tag = { 2 "key": [{ 3 "Tom": { 4 "label": "Dick", 5 "data": "20", 6 "selected": true,

のようにしておいたら、上記より後に外部javascriotファイルをロードすれば、普通にjson_tagをfor文で回していって追記というのではだめですか?

投稿2016/10/27 03:12

hiim

総合スコア1689

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

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

0

こういうことですか?

JavaScript

1var selTagKey = { 2 "key": [{ 3 "Tom": { 4 "label": "Dick", 5 "data": "20", 6 "selected": true, 7 "value": [ 8 { 9 "label": "Harry", 10 "data": "all", 11 "selected": true 12 }, 13 { 14 "label": "Bob", 15 "data": "7d", 16 "selected": false 17 } 18 ] 19 } 20 }] 21}; 22$(function () { 23 var tagObj = new Object; 24 var _key = selTagKey.key; 25 tagObj = selTagKey; 26 for (var i in _key) { 27 for (var n in _key[i]) { 28 var test = _key[i][n]; 29 var options = $('<option></option>', { 30 text: test.label, 31 "value": test.data, 32 "selected": test.selected 33 }); 34 $("#tagKey").append(options); 35 for (var v in _key[i][n]['value']) { 36 var _val = _key[i][n]['value'][v]; 37 var child_options = $('<option></option>', { 38 text: _val.label, 39 "value": _val.data, 40 "selected": _val.selected 41 }); 42 } 43 } 44 }; 45 $("#tagKey").change(); 46});

投稿2016/10/27 03:10

kei344

総合スコア69366

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

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

hibikikudo

2016/10/27 03:13

ご回答ありがとうございます。HTMLとJSが一つづつというフォルダの構造を変えずに、上記を実現したいのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問