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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

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

Q&A

解決済

2回答

6749閲覧

HTMLにJSONデータを埋め込みたい

退会済みユーザー

退会済みユーザー

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

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

0グッド

0クリップ

投稿2017/09/03 04:50

編集2017/09/03 12:37

HTMLにJSONデータを埋め込みたいです。
PythonとDjangoとHTMLとJSでWEBサイトを作っています。{{ form }}のドリルダウンをいじると背景・h1・pの色が変わるしくみになっています。
index.html に

<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> </head> <body> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> color_array = { for (var i=0 ; i<=colors.length ; i++){ colors["name"] : { "background-color" : colors["background_color"], "h1" : colors["h1_color"] , "p" : colors["p_color"] , }, } }; function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color(); var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) </script> </body> </html>

と書いています。

var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({})

と書いたcolors変数にJSONの結果

[ { "name": "white", "background_color": "#FFFFFF", "h1_color": "#000080", "p_color": "#0000FF", "task_name": "white" }, { "name": "green", "background_color": "#00FF00", "h1_color": "#00FFFF", "p_color": "#FFFF00", "task_name": "green" }, { "name": "pink", "background_color": "#FF00FF", "h1_color": "#FFFFFF", "p_color": "#000000", "task_name": "pink" } ]

が入っています。このJSON結果の"background_color"&"h1_color"&"p_color"を

"background-color" : colors["background_color"], "h1" : colors["h1_color"] , "p" : colors["p_color"] ,

にそれぞれ入れたいです。しかしこのように書いたコードを実行してドリルダウンを動かしても色が変わりません。おそらくJSON結果が上手く入っていないからだと思いますが。。。
どう直せば良いのでしょうか?

今のindex.htmlは

<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> </head> <body> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> <!--color_array = {--> <!--for (var i=0 ; i<=colors.length ; i++){--> <!--colors["name"] : {--> <!--"background-color" : colors["background_color"],--> <!--"h1" : colors["h1_color"] ,--> <!--"p" : colors["p_color"] ,--> <!--},--> <!--}--> <!--};--> var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) color_array = {} for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color(); </script> </body> </html>

のようになっています。

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

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

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

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

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

guest

回答2

0

ベストアンサー

javascript

1color_array = { 2 for (var i=0 ; i<=colors.length ; i++){ 3 colors["name"] : { 4 "background-color" : colors["background_color"], 5 "h1" : colors["h1_color"] , 6 "p" : colors["p_color"] , 7 }, 8 } 9};

ここに次のような問題が有るのではないかと思いました。

  • 連想配列の宣言の中にfor文は書けないはず
  • このforが呼び出された時点ではcolorsは未定義
  • colors自体は配列なので、colors["name"]と指定しても何も帰ってこない

以下、改善案です

javascript

1 // jsonを取ってくる 2 var xhr = new XMLHttpRequest(); 3 xhr.onload = function(){ 4 colors = JSON.parse(xhr.response) // ここでcolorsが定義される 5 console.log(color) 6 } 7 8 xhr.open("GET","http://localhost:8000/app/api/get/",false); 9 xhr.send({}) 10 11 // color_arrayを初期化 12 color_array = {} 13 for (var i=0 ; i<=colors.length ; i++){ 14 color_array[i] = colors[i]["name"] : { 15 "background-color" : colors[i]["background_color"], 16 "h1" : colors[i]["h1_color"] , 17 "p" : colors[i]["p_color"] , 18 }; 19 }

これで意図された動作になるのでは無いでしょうか?

投稿2017/09/03 07:43

編集2017/09/03 07:49
intelf___

総合スコア868

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

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

退会済みユーザー

退会済みユーザー

2017/09/03 10:39

ありがとうございます。そのように実装したのですが、 ドリルダウンを動かしても意図した動作になりません。 Googleの検証のConsoleでは Uncaught SyntaxError: Unexpected token : と1件のエラーが出ていました。(本来ならJSONの結果が出るはずなのに) どのように直おせば良いのでしょうか?
intelf___

2017/09/03 12:31

Uncaught SyntaxError: Unexpected token : これは構文エラーですね すみません、こちらの確認不足です。 colors[i]["name"] : が余分でした。 ``` // color_arrayを初期化 color_array = [] for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } ```
退会済みユーザー

退会済みユーザー

2017/09/03 12:36

うーん、まだうまく行かないです。。。 (index):49 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. (anonymous) @ (index):49 (index):46 Uncaught ReferenceError: color is not defined at XMLHttpRequest.xhr.onload ((index):46) at (index):50 xhr.onload @ (index):46 (anonymous) @ (index):50 (index):55 Uncaught TypeError: Cannot read property 'background_color' of undefined at (index):55
退会済みユーザー

退会済みユーザー

2017/09/03 12:37

のようにConsoleにエラーが出ていて。質問文に今のhtmlをアップロードしましたので、もし間違いがわかればご指摘ください。
intelf___

2017/09/03 13:08 編集

あー、非同期処理によるエラーですね 以下のようにすると回避出来ます。 ``` xhr.onload = function(){ colors = JSON.parse(xhr.response) // ここでcolorsが定義される console.log(colors) // ここにfor文等の、colors定義後に実行したい処理を入れる } ``` async/await、Promiseオブジェクトを使いこなせるとこのあたりの非同期処理を書くのが楽になりますが、safariやedgeなどのブラウザが非対応だったように思います。 例に挙げたように普通にonload内に処理を書いてしまいましょう。
退会済みユーザー

退会済みユーザー

2017/09/03 13:16

コメントを読んで書いて見たのですが、 var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(color) $( '#id_color' ).change( function () { change_color(); }); change_color(); } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) color_array = {} for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } というコードということでしょうか?
退会済みユーザー

退会済みユーザー

2017/09/03 13:16

(これだとエラーが出てしまいました。。。)
intelf___

2017/09/03 13:26

onloadの関数に入れるものが違いますね 以下のようなイメージです var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(colors) // ここにfor文等の、colors定義後に実行したい処理を入れる color_array = [] for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color();
intelf___

2017/09/03 13:32 編集

onloadで呼び出される関数は、非同期に遅延実行されるという認識で考えてみてください。 いくら colors = JSON.parse(xhr.response)//colorsの定義 を手前に書いたところで、onload関数内なので遅延実行され、後のfor文でのcolorsを参照する部分でエラーになってしまいます。 解決するには、colorsの参照をする部分をまるごと遅延実行(colors定義以降かつonload関数内で処理)させる必要があります。
guest

0

jsonデータをimportできていない可能性があります。

xhr.open("GET","http://localhost:8000/app/api/get/",false);//jsonデータの指定

javascript
http://uxmilk.jp/46993

投稿2017/09/03 07:13

Higemura

総合スコア274

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問