回答編集履歴
33
テキスト修正
answer
CHANGED
|
@@ -76,14 +76,14 @@
|
|
|
76
76
|
var myDash = JSON.parse(this.responseText);
|
|
77
77
|
for (var foo in myDash){
|
|
78
78
|
for (var num in myDash[foo]){
|
|
79
|
-
// (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>';
|
|
79
|
+
// 修正(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>';
|
|
80
80
|
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>';
|
|
81
81
|
}}
|
|
82
|
-
// (2): document.getElementById("calendar") += objobj;
|
|
82
|
+
// 修正(2): document.getElementById("calendar") += objobj;
|
|
83
83
|
document.getElementById("calendar").innerHTML = objobj;
|
|
84
84
|
return;
|
|
85
85
|
};
|
|
86
|
-
httpObj.send(); // (1)
|
|
86
|
+
httpObj.send(); // 追加(1)
|
|
87
87
|
}
|
|
88
88
|
</script>
|
|
89
89
|
<script>
|
32
テキスト修正
answer
CHANGED
|
@@ -76,14 +76,14 @@
|
|
|
76
76
|
var myDash = JSON.parse(this.responseText);
|
|
77
77
|
for (var foo in myDash){
|
|
78
78
|
for (var num in myDash[foo]){
|
|
79
|
-
// 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>';
|
|
79
|
+
// (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>';
|
|
80
80
|
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>';
|
|
81
81
|
}}
|
|
82
|
-
// document.getElementById("calendar") += objobj;
|
|
82
|
+
// (2): document.getElementById("calendar") += objobj;
|
|
83
83
|
document.getElementById("calendar").innerHTML = objobj;
|
|
84
84
|
return;
|
|
85
85
|
};
|
|
86
|
-
httpObj.send(); // 追加
|
|
86
|
+
httpObj.send(); // (1): 追加
|
|
87
87
|
}
|
|
88
88
|
</script>
|
|
89
89
|
<script>
|
31
テキスト修正
answer
CHANGED
|
@@ -54,9 +54,9 @@
|
|
|
54
54
|
|
|
55
55
|
### 修正後のHTML
|
|
56
56
|
|
|
57
|
-
上記3点を修正したJSを含む
|
|
57
|
+
上記3点を修正したJSを含むHTMLを作成したので、参考のため以下に挙げておきます。
|
|
58
58
|
|
|
59
|
-
なお動作確認
|
|
59
|
+
なお以下のHTMLでは、実際にJSONをXMLHttpRequestで取得して動作確認できるようにするため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにして、これを使うようにしていますが、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
<!DOCTYPE html>
|
30
テキスト修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
以下の3点を追加、修正するといかがでしょうか？(3点目は暫定の修正です）
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### (1) httpObj.send() の追加
|
|
6
6
|
|
|
7
7
|
以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send();`を追加します。
|
|
8
8
|
|
29
テキスト修正
answer
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
58
58
|
|
|
59
|
-
なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバ
|
|
59
|
+
なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
<!DOCTYPE html>
|
28
テキスト修正
answer
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
58
58
|
|
|
59
|
-
なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
|
|
59
|
+
なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
<!DOCTYPE html>
|
27
テキスト修正
answer
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
58
58
|
|
|
59
|
-
なお動作確認のため、JSON
|
|
59
|
+
なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
<!DOCTYPE html>
|
26
テキスト修正
answer
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
58
58
|
|
|
59
|
-
なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（コメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
|
|
59
|
+
なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
<!DOCTYPE html>
|
25
テキスト修正
answer
CHANGED
|
@@ -54,8 +54,10 @@
|
|
|
54
54
|
|
|
55
55
|
### 修正後のHTML
|
|
56
56
|
|
|
57
|
-
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
57
|
+
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
58
58
|
|
|
59
|
+
なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（コメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
|
|
60
|
+
|
|
59
61
|
```HTML
|
|
60
62
|
<!DOCTYPE html>
|
|
61
63
|
<html lang="ja">
|
24
テキスト修正
answer
CHANGED
|
@@ -104,4 +104,4 @@
|
|
|
104
104
|
ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
105
105
|
|
|
106
106
|
以上、参考になれば幸いです。
|
|
107
|
-
（※ 修正後のHTMLで使っている、
|
|
107
|
+
（※ 修正後のHTMLで使っている、mockableに載せたJSONは、この質問が解決済みになりしだい消します）
|
23
テキスト修正
answer
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
### 修正後のHTML
|
|
56
56
|
|
|
57
|
-
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
|
|
57
|
+
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、私の手元ではこれを使うようにしましたが、ShotaYamamotoさんのほうでは、Pythonで作ったバックエンドのエンドポイント（コメントアウトしています。）に戻して頂ければと思います。
|
|
58
58
|
|
|
59
59
|
```HTML
|
|
60
60
|
<!DOCTYPE html>
|
22
テキスト修正
answer
CHANGED
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
私のほうの手元で、`calendar.js` と `Main_2.css`
|
|
98
|
+
私のほうの手元で、上記のHTMLを表示させると以下のようになりました。（`calendar.js` と `Main_2.css` は、空（＝大きさゼロ）のファイルとして用意しました。）
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
|
21
テキスト修正
answer
CHANGED
|
@@ -104,4 +104,4 @@
|
|
|
104
104
|
ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
105
105
|
|
|
106
106
|
以上、参考になれば幸いです。
|
|
107
|
-
（※ [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）
|
|
107
|
+
（※ 修正後のHTMLで使っている、 [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）
|
20
テキスト修正
answer
CHANGED
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
私のほうの手元で、`calendar.js` と `Main_2.css`
|
|
98
|
+
私のほうの手元で、`calendar.js` と `Main_2.css` を空（＝大きさゼロ）のファイルとして用意したうえで上記のHTMLを表示させると以下のようになりました。
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
|
19
テキスト修正
answer
CHANGED
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
</script>
|
|
90
90
|
</head>
|
|
91
91
|
<body>
|
|
92
|
-
<div id="calendar"></div>
|
|
92
|
+
<div id="calendar"></div>
|
|
93
93
|
</body>
|
|
94
94
|
</html>
|
|
95
95
|
|
18
テキスト修正
answer
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
|
|
53
53
|
修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの簡単な修正で `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻しておきます。
|
|
54
54
|
|
|
55
|
-
###
|
|
55
|
+
### 修正後のHTML
|
|
56
56
|
|
|
57
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておき、これを使うようにしました。）
|
|
58
58
|
|
17
テキスト修正
answer
CHANGED
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
|
|
102
|
-
上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできている
|
|
102
|
+
上記の画面キャプチャによって、とりあえずご質問の主旨である 「**外部JSONファイルを動的にHTMLへ追加したい**」という課題はクリアできていることを確認できると思います。
|
|
103
|
-
|
|
103
|
+
|
|
104
104
|
ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
105
105
|
|
|
106
106
|
以上、参考になれば幸いです。
|
16
テキスト修正
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
### （１） httpObj.send() の追加
|
|
6
6
|
|
|
7
|
-
以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send(
|
|
7
|
+
以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send();`を追加します。
|
|
8
8
|
|
|
9
9
|
**修正前：**
|
|
10
10
|
```javascript
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
// ・・・中略・・・
|
|
25
25
|
return;
|
|
26
26
|
};
|
|
27
|
-
httpObj.send(
|
|
27
|
+
httpObj.send(); // 追加
|
|
28
28
|
}
|
|
29
29
|
```
|
|
30
30
|
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
document.getElementById("calendar").innerHTML = objobj;
|
|
82
82
|
return;
|
|
83
83
|
};
|
|
84
|
-
httpObj.send(
|
|
84
|
+
httpObj.send(); // 追加
|
|
85
85
|
}
|
|
86
86
|
</script>
|
|
87
87
|
<script>
|
15
テキスト修正
answer
CHANGED
|
@@ -85,9 +85,7 @@
|
|
|
85
85
|
}
|
|
86
86
|
</script>
|
|
87
87
|
<script>
|
|
88
|
-
|
|
88
|
+
document.addEventListener('DOMContentLoaded', cal);
|
|
89
|
-
cal();
|
|
90
|
-
});
|
|
91
89
|
</script>
|
|
92
90
|
</head>
|
|
93
91
|
<body>
|
14
テキスト修正
answer
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
// ・・・中略・・・
|
|
25
25
|
return;
|
|
26
26
|
};
|
|
27
|
-
httpObj.send(null);
|
|
27
|
+
httpObj.send(null); // 追加
|
|
28
28
|
}
|
|
29
29
|
```
|
|
30
30
|
|
13
テキスト修正
answer
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
+ JSON.stringify(myDash[foo]) +
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの
|
|
53
|
+
修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの簡単な修正で `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻しておきます。
|
|
54
54
|
|
|
55
55
|
### 補足
|
|
56
56
|
|
12
テキスト修正
answer
CHANGED
|
@@ -50,6 +50,8 @@
|
|
|
50
50
|
+ JSON.stringify(myDash[foo]) +
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの修正として、簡単に `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻します。
|
|
54
|
+
|
|
53
55
|
### 補足
|
|
54
56
|
|
|
55
57
|
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておき、これを使うようにしました。）
|
11
テキスト修正
answer
CHANGED
|
@@ -72,13 +72,14 @@
|
|
|
72
72
|
var myDash = JSON.parse(this.responseText);
|
|
73
73
|
for (var foo in myDash){
|
|
74
74
|
for (var num in myDash[foo]){
|
|
75
|
+
// 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>';
|
|
75
76
|
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>';
|
|
76
77
|
}}
|
|
77
78
|
// document.getElementById("calendar") += objobj;
|
|
78
79
|
document.getElementById("calendar").innerHTML = objobj;
|
|
79
80
|
return;
|
|
80
81
|
};
|
|
81
|
-
httpObj.send(null);
|
|
82
|
+
httpObj.send(null); // 追加
|
|
82
83
|
}
|
|
83
84
|
</script>
|
|
84
85
|
<script>
|
10
テキスト修正
answer
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
|
|
53
53
|
### 補足
|
|
54
54
|
|
|
55
|
-
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておきました。）
|
|
55
|
+
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておき、これを使うようにしました。）
|
|
56
56
|
|
|
57
57
|
```HTML
|
|
58
58
|
<!DOCTYPE html>
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
<script>
|
|
66
66
|
function cal(){
|
|
67
67
|
var httpObj = new XMLHttpRequest();
|
|
68
|
+
// httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
|
|
68
69
|
httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
|
|
69
70
|
httpObj.onload = function (){
|
|
70
71
|
var objobj = '';
|
9
テキスト修正
answer
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
### （１） httpObj.send() の追加
|
|
6
6
|
|
|
7
|
+
以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send(null);`を追加します。
|
|
8
|
+
|
|
7
9
|
**修正前：**
|
|
8
10
|
```javascript
|
|
9
11
|
function cal(){
|
8
テキスト修正
answer
CHANGED
|
@@ -69,8 +69,7 @@
|
|
|
69
69
|
var myDash = JSON.parse(this.responseText);
|
|
70
70
|
for (var foo in myDash){
|
|
71
71
|
for (var num in myDash[foo]){
|
|
72
|
-
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>'
|
|
73
|
-
;
|
|
72
|
+
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>';
|
|
74
73
|
}}
|
|
75
74
|
// document.getElementById("calendar") += objobj;
|
|
76
75
|
document.getElementById("calendar").innerHTML = objobj;
|
7
テキスト修正
answer
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
以下の3点を追加、修正するといかがでしょうか？(3点目は暫定の修正です）
|
|
4
4
|
|
|
5
5
|
### （１） httpObj.send() の追加
|
|
6
|
+
|
|
6
7
|
**修正前：**
|
|
7
8
|
```javascript
|
|
8
9
|
function cal(){
|
|
@@ -25,6 +26,8 @@
|
|
|
25
26
|
}
|
|
26
27
|
```
|
|
27
28
|
|
|
29
|
+
- **参考：** [MDN - XMLHttpRequest の利用](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
|
|
30
|
+
|
|
28
31
|
### (2) objobjをDOMに反映させている行の修正
|
|
29
32
|
**修正前：**
|
|
30
33
|
```javascript
|
6
テキスト修正
answer
CHANGED
|
@@ -98,4 +98,4 @@
|
|
|
98
98
|
ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
99
99
|
|
|
100
100
|
以上、参考になれば幸いです。
|
|
101
|
-
（※mockableに載せたJSONは、この質問が解決済みになりしだい消します）
|
|
101
|
+
（※ [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）
|
5
テキスト修正
answer
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
function cal(){
|
|
9
9
|
// ・・・中略・・・
|
|
10
10
|
httpObj.onload = function (){
|
|
11
|
+
// ・・・中略・・・
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
}
|
|
@@ -17,8 +18,9 @@
|
|
|
17
18
|
function cal(){
|
|
18
19
|
// ・・・中略・・・
|
|
19
20
|
httpObj.onload = function (){
|
|
21
|
+
// ・・・中略・・・
|
|
20
22
|
return;
|
|
21
|
-
}
|
|
23
|
+
};
|
|
22
24
|
httpObj.send(null);
|
|
23
25
|
}
|
|
24
26
|
```
|
|
@@ -70,7 +72,7 @@
|
|
|
70
72
|
// document.getElementById("calendar") += objobj;
|
|
71
73
|
document.getElementById("calendar").innerHTML = objobj;
|
|
72
74
|
return;
|
|
73
|
-
}
|
|
75
|
+
};
|
|
74
76
|
httpObj.send(null);
|
|
75
77
|
}
|
|
76
78
|
</script>
|
4
テキスト修正
answer
CHANGED
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記の
|
|
90
|
+
私のほうの手元で、`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のHTMLを表示させると以下のようになりました。
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
|
|
94
94
|
上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
97
97
|
|
|
98
98
|
以上、参考になれば幸いです。
|
|
99
|
-
（※mockableに載せた
|
|
99
|
+
（※mockableに載せたJSONは、この質問が解決済みになりしだい消します）
|
3
テキスト修正
answer
CHANGED
|
@@ -87,11 +87,13 @@
|
|
|
87
87
|
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになり
|
|
90
|
+
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになりました。
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
|
|
95
95
|
|
|
96
|
+
次に`calendar.js` と `Main_2.css` を空ではない実際のものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
97
|
+
|
|
96
98
|
以上、参考になれば幸いです。
|
|
97
99
|
（※mockableに載せたＪＳＯＮは、この質問が解決済みになりしだい消します）
|
2
テキスト修正
answer
CHANGED
|
@@ -87,8 +87,11 @@
|
|
|
87
87
|
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになります。
|
|
90
|
+
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになり、とりあえず、ご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
|
|
94
|
+
次に`calendar.js` と `Main_2.css` を空ではない何らかのものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
|
|
95
|
+
|
|
94
|
-
以上、参考になれば幸いです。
|
|
96
|
+
以上、参考になれば幸いです。
|
|
97
|
+
（※mockableに載せたＪＳＯＮは、この質問が解決済みになりしだい消します）
|
1
テキスト修正
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
こんにちは。
|
|
2
2
|
|
|
3
|
-
以下の
|
|
3
|
+
以下の3点を追加、修正するといかがでしょうか？(3点目は暫定の修正です）
|
|
4
4
|
|
|
5
5
|
### （１） httpObj.send() の追加
|
|
6
6
|
**修正前：**
|
|
@@ -33,4 +33,62 @@
|
|
|
33
33
|
document.getElementById("calendar").innerHTML = objobj;
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
+
### (3) myDash[foo] を JSONに戻してから<span>で表示させる。
|
|
37
|
+
**修正前：**
|
|
38
|
+
```javascript
|
|
39
|
+
+ myDash[foo] +
|
|
40
|
+
```
|
|
41
|
+
**修正後：**
|
|
42
|
+
```javascript
|
|
43
|
+
+ JSON.stringify(myDash[foo]) +
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 補足
|
|
47
|
+
|
|
48
|
+
上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておきました。）
|
|
49
|
+
|
|
50
|
+
```HTML
|
|
51
|
+
<!DOCTYPE html>
|
|
52
|
+
<html lang="ja">
|
|
53
|
+
<head>
|
|
54
|
+
<meta charset="utf-8"/>
|
|
55
|
+
<link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
|
|
56
|
+
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&subset=japanese" rel="stylesheet">
|
|
57
|
+
<script src="../css/calendar.js"></script>
|
|
58
|
+
<script>
|
|
59
|
+
function cal(){
|
|
60
|
+
var httpObj = new XMLHttpRequest();
|
|
61
|
+
httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
|
|
62
|
+
httpObj.onload = function (){
|
|
63
|
+
var objobj = '';
|
|
64
|
+
var myDash = JSON.parse(this.responseText);
|
|
65
|
+
for (var foo in myDash){
|
|
66
|
+
for (var num in myDash[foo]){
|
|
67
|
+
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>'
|
|
68
|
+
;
|
|
69
|
+
}}
|
|
70
|
+
// document.getElementById("calendar") += objobj;
|
|
71
|
+
document.getElementById("calendar").innerHTML = objobj;
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
httpObj.send(null);
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
77
|
+
<script>
|
|
78
|
+
document.addEventListener('DOMContentLoaded', function(){
|
|
79
|
+
cal();
|
|
80
|
+
});
|
|
81
|
+
</script>
|
|
82
|
+
</head>
|
|
83
|
+
<body>
|
|
84
|
+
<div id="calendar"></div>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになります。
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
36
94
|
以上、参考になれば幸いです。
|