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

前提・実現したいこと

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

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

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

該当のソースコード

Javascript
1function cal(){
2
3  var httpObj = new XMLHttpRequest();
4    httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
5    httpObj.onload = function (){
6      var objobj = '';
7      var myDash = JSON.parse(this.responseText);
8        for (var foo in myDash){
9          for (var num in myDash[foo]){
10           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>'
11;
12      }}
13document.getElementById("calendar") += objobj;
14return;
15}
16}

Json
1{
2　　"user_1": {
3             "7": {
4                    "begin_date": "2019/01/11", 
5                    "begin_time": "22:02", 
6                    "event": "テスト", 
7                    "color": "#ffff00"
8}, 
9             "8": {
10                    "begin_date": "2019/01/11", 
11                    "begin_time": "21:59", 
12                    "event": "テスト", 
13                    "color": "#ffff00"
14}
15}, 
16   "user_2": {
17            "10": {
18                    "begin_date": "2019/01/11", 
19                    "begin_time": "16:06", 
20                    "event": "テスト", 
21                    "color": "##ff8eff"
22}
23}
24}

HTML
1<head>
2<meta charset="utf-8"/>
3<link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
4<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&amp;subset=japanese" rel="stylesheet">
5<script src="../css/calendar.js"></script>
6</head>
7<body>
8<div id="calendar"></div>
9</body>

試したこと

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

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>JS Bin</title>
7</head>
8<body>
9  
10  <div id="cal"></div>
11</body>
12</html>

javascript
1var jsondata = {
2"user_1": {
3           "7": {
4                 "begin_date": "2019/01/11", 
5                 "begin_time": "22:02", 
6                 "event": "テスト", 
7                 "color": "#ffff00"
8}, 
9           "8": {
10                 "begin_date": "2019/01/11", 
11                 "begin_time": "21:59", 
12                 "event": "テスト", 
13                 "color": "#ffff00"
14}
15}, 
16"user_2": {
17           "10": {
18                  "begin_date": "2019/01/11", 
19                  "begin_time": "16:06", 
20                  "event": "テスト", 
21                  "color": "##ff8eff"
22}
23}
24}
25var objobj = document.getElementById("cal");
26  for (var foo in jsondata){
27    for (var num in jsondata[foo]){
28　　　　//テストなのでeventのみ
29      objobj.innerHTML += "<span>"+jsondata[foo][num]["event"]+"</span><br>";}}

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

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

kei344

2019/01/12 03:04

ご自身で試されたコードおよびサンプルデータを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

ShotaYamamoto

2019/01/12 03:06

投稿に失敗しておりました。追加しました。

papinianus

2019/01/12 04:20

0.0.0.0は意図して設定できているのですか？127.0.0.1とかではなく？

ShotaYamamoto

2019/01/12 04:37

Pythonの簡易サーバーを起動すると下記のように表示されるためそのまま利用しています。 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... またJavaScript中のJSONファイルのパスにブラウザから直接アクセスもできています

papinianus

2019/01/12 04:39

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

m.ts10806

2019/01/12 06:10

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

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

回答1件

ベストアンサー

こんにちは。

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

(1) httpObj.send() の追加

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

修正前：

javascript
1function cal(){
2　 // ・・・中略・・・
3  httpObj.onload = function (){
4    // ・・・中略・・・
5    return;  
6  }
7}

修正後：

javascript
1function cal(){
2　 // ・・・中略・・・
3  httpObj.onload = function (){
4    // ・・・中略・・・
5    return;  
6  };
7  httpObj.send();  // 追加
8}

参考： MDN - XMLHttpRequest の利用

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

修正前：

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

修正後：

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

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

修正前：

javascript
1+ myDash[foo] +

修正後：

javascript
1+ 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を戻して頂ければと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8"/>
5    <link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
6    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&amp;subset=japanese" rel="stylesheet">
7    <script src="../css/calendar.js"></script>
8    <script>
9      function cal(){
10        var httpObj = new XMLHttpRequest();
11        // httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
12        httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
13        httpObj.onload = function (){
14          var objobj = '';
15          var myDash = JSON.parse(this.responseText);
16          for (var foo in myDash){
17            for (var num in myDash[foo]){
18              // 修正(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>';
19              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>';
20            }}
21          // 修正(2): document.getElementById("calendar") += objobj;
22          document.getElementById("calendar").innerHTML = objobj;
23          return;
24        };
25        httpObj.send();  // 追加(1)
26      }
27    </script>
28    <script>
29      document.addEventListener('DOMContentLoaded', cal);
30    </script>
31</head>
32<body>
33    <div id="calendar"></div>
34</body>
35</html>
36

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

上記の画面キャプチャによって、とりあえずご質問の主旨である「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできていることを確認できると思います。

ShotaYamamotoさんのお手元では、calendar.js と Main_2.css は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。

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

投稿2019/01/12 05:38

編集2019/01/12 10:06

jun68ykt

総合スコア9058

ShotaYamamoto

2019/01/12 14:29

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