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

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

ただいまの
回答率

90.42%

  • JavaScript

    18023questions

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

  • HTML

    9883questions

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

  • JSON

    1284questions

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

外部JSONファイルを動的にHTMLへ追加したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 295

前提・実現したいこと

Python3の簡易サーバーを利用してローカルに保存したJSONファイルをJavascriptで取得しHTMLに動的に組み込みたいです。

発生している問題・エラーメッセージ

JSONの取得、JSONのパース、HTMLへの動的組み込みのそれぞれの処理単体では動いているのですが、一つにまとめた際に上手く動きません。
chromeのJavascriptコンソールでもエラーが表示されないため、原因がつかめないでいます。

該当のソースコード

function cal(){

  var httpObj = new XMLHttpRequest();
    httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
    httpObj.onload = function (){
      var objobj = '';
      var myDash = JSON.parse(this.responseText);
        for (var foo in myDash){
          for (var num in myDash[foo]){
           objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>'
;
      }}
document.getElementById("calendar") += objobj;
return;
}
}
{
  "user_1": {
             "7": {
                    "begin_date": "2019/01/11", 
                    "begin_time": "22:02", 
                    "event": "テスト", 
                    "color": "#ffff00"
}, 
             "8": {
                    "begin_date": "2019/01/11", 
                    "begin_time": "21:59", 
                    "event": "テスト", 
                    "color": "#ffff00"
}
}, 
   "user_2": {
            "10": {
                    "begin_date": "2019/01/11", 
                    "begin_time": "16:06", 
                    "event": "テスト", 
                    "color": "##ff8eff"
}
}
}
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&amp;subset=japanese" rel="stylesheet">
<script src="../css/calendar.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>

試したこと

JS BINというサイトで以下のように試したところでは動いたのでそのまま、実際の環境においてみましたが動きませんでした。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="cal"></div>
</body>
</html>
var jsondata = {
"user_1": {
           "7": {
                 "begin_date": "2019/01/11", 
                 "begin_time": "22:02", 
                 "event": "テスト", 
                 "color": "#ffff00"
}, 
           "8": {
                 "begin_date": "2019/01/11", 
                 "begin_time": "21:59", 
                 "event": "テスト", 
                 "color": "#ffff00"
}
}, 
"user_2": {
           "10": {
                  "begin_date": "2019/01/11", 
                  "begin_time": "16:06", 
                  "event": "テスト", 
                  "color": "##ff8eff"
}
}
}
var objobj = document.getElementById("cal");
  for (var foo in jsondata){
    for (var num in jsondata[foo]){
    //テストなのでeventのみ
      objobj.innerHTML += "<span>"+jsondata[foo][num]["event"]+"</span><br>";}}

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ShotaYamamoto

    2019/01/12 13:37

    Pythonの簡易サーバーを起動すると下記のように表示されるためそのまま利用しています。
    Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

    またJavaScript中のJSONファイルのパスにブラウザから直接アクセスもできています

    キャンセル

  • papinianus

    2019/01/12 13:39

    それは無知でした。それを宛先として使うとは思わなかったもので。

    キャンセル

  • mts10806

    2019/01/12 15:10

    無名関数のようなもののはず。

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

以下の3点を追加、修正するといかがでしょうか?(3点目は暫定の修正です)

(1) httpObj.send() の追加

以下のように、httpObj.onload に関数を代入した後に、httpObj.send();を追加します。

修正前:

function cal(){
  // ・・・中略・・・
  httpObj.onload = function (){
    // ・・・中略・・・
    return;  
  }
}


修正後:

function cal(){
  // ・・・中略・・・
  httpObj.onload = function (){
    // ・・・中略・・・
    return;  
  };
  httpObj.send();  // 追加
}

(2) objobjをDOMに反映させている行の修正

修正前:

document.getElementById("calendar") += objobj;


修正後:

document.getElementById("calendar").innerHTML = objobj;

(3)  myDash[foo] を JSONに戻してから<span>で表示させる。

修正前:

+ myDash[foo] +


修正後:

+ JSON.stringify(myDash[foo]) +

修正前のままだと、[object Object]と表示されてしまいます。とり急ぎの簡単な修正で myDash[foo] の内容を表示させるために、JSON.stringifyでJSON文字列に戻しておきます。

修正後のHTML

上記3点を修正したJSを含むHTMLを作成したので、参考のため以下に挙げておきます。

なお以下のHTMLでは、実際にJSONをXMLHttpRequestで取得して動作確認できるようにするため、ご質問にあるJSONをmockable.ioからGETできるようにして、これを使うようにしていますが、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント(以下ではコメントアウトしています。)にリクエストを送るように、URLを戻して頂ければと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&amp;subset=japanese" rel="stylesheet">
    <script src="../css/calendar.js"></script>
    <script>
      function cal(){
        var httpObj = new XMLHttpRequest();
        // httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
        httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
        httpObj.onload = function (){
          var objobj = '';
          var myDash = JSON.parse(this.responseText);
          for (var foo in myDash){
            for (var num in myDash[foo]){
              // 修正(3):  objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
              objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
            }}
          // 修正(2): document.getElementById("calendar") += objobj;
          document.getElementById("calendar").innerHTML = objobj;
          return;
        };
        httpObj.send();  // 追加(1)
      }
    </script>
    <script>
      document.addEventListener('DOMContentLoaded', cal);
    </script>
</head>
<body>
    <div id="calendar"></div>
</body>
</html>

私のほうの手元で、上記のHTMLを表示させると以下のようになりました。(calendar.js と Main_2.css は、空(=大きさゼロ)のファイルとして用意しました。)

イメージ説明

上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできていることを確認できると思います。
 
ShotaYamamotoさんのお手元では、calendar.js と Main_2.css は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。

以上、参考になれば幸いです。
(※ 修正後のHTMLで使っている、mockableに載せたJSONは、この質問が解決済みになりしだい消します)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/12 23:29

    HTML側にdocument.addEventListener('DOMContentLoaded', cal);を入れてみたところ、Javascriptで処理した内容が表示されました。
    私が書いているコードの内容はまだ改良の余地が大いにありますが、これで次の段階に進めそうです。
    ありがとうございました!

    キャンセル

  • 2019/01/12 23:51

    @ShotaYamamotoさん

    > これで次の段階に進めそうです。
    とのことでよかったです👍

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    18023questions

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

  • HTML

    9883questions

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

  • JSON

    1284questions

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