teratail
回答率
85.48%
質問するログイン新規登録
トップJSONに関する質問JavascriptでJSONデータの受け取りと列表示方法

編集履歴

回答編集履歴

6

編集

2018/01/13 14:09

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -92,6 +92,10 @@
92
92
 
93
93
  以下以前の回答。お恥ずかしい限りです。
94
94
 
95
+
96
+
97
+ <以前の回答>
98
+
95
99
  #
96
100
 
97
101
 
@@ -413,3 +417,7 @@
413
417
 
414
418
 
415
419
  - [Ajaxのjsonp・callbackの仕組みについて解説します。](http://javatechnology.net/ajax/jsonp-callback/)
420
+
421
+
422
+
423
+ </以前の回答>

5

真の解法の発見

2018/01/13 14:09

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -1,3 +1,101 @@
1
+ # 真・解法の発見
2
+
3
+
4
+
5
+ 散々追記した後になって初めて質問者様に挙げていただいた[1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法](https://iwb.jp/jquery-ajax-jsonp/)を読み、さらにもうすでにクロスドメインについてこの記事で記述されていることに気づきショックを受けた上で、ようやく解法を見つけたので、上に載せます。何度も何度も追記してごめんなさい。一気にしろって感じですよね(^ ^;
6
+
7
+
8
+
9
+ ```html
10
+
11
+ <!DOCTYPE html>
12
+
13
+ <html>
14
+
15
+ <head>
16
+
17
+ <meta charset="UTF-8">
18
+
19
+ <title>107356</title>
20
+
21
+ </head>
22
+
23
+ <body>
24
+
25
+ <table id="a" border=1>
26
+
27
+ <tr>
28
+
29
+ <th>version</th>
30
+
31
+ <th>codename</th>
32
+
33
+ </tr>
34
+
35
+ </table>
36
+
37
+
38
+
39
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
40
+
41
+ <script>
42
+
43
+ $.ajax({
44
+
45
+ type: 'GET',
46
+
47
+ url: 'https://iwb.jp/s/js/data.jsonp',
48
+
49
+ jsonpCallback: 'android',
50
+
51
+ dataType: 'jsonp'
52
+
53
+ }).then(
54
+
55
+ function(json){
56
+
57
+ var a = $("#a");
58
+
59
+ json.forEach(function(val){
60
+
61
+ a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
62
+
63
+ });
64
+
65
+ },
66
+
67
+ function(a,b,c){ // ここテキトーに書いてますので真に受けないでください。
68
+
69
+ alert('ERROR');
70
+
71
+ alert(a.status);
72
+
73
+ alert(b);
74
+
75
+ alert(c);
76
+
77
+ }
78
+
79
+ );
80
+
81
+ </script>
82
+
83
+ </body>
84
+
85
+ </html>
86
+
87
+ ```
88
+
89
+
90
+
91
+
92
+
93
+ 以下以前の回答。お恥ずかしい限りです。
94
+
95
+ #
96
+
97
+
98
+
1
99
  まさか、`#a`が表す要素がなかったとかそんなオチじゃないでしょうね？
2
100
 
3
101
 

4

一部訂正

2018/01/13 14:04

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -88,11 +88,11 @@
88
88
 
89
89
 
90
90
 
91
- とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。
91
+ ~~とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。~~
92
-
93
-
94
-
92
+
93
+
94
+
95
- または先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
95
+ ~~または~~先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
96
96
 
97
97
 
98
98
 
@@ -285,3 +285,33 @@
285
285
 
286
286
 
287
287
  このまま実行するとおそらくreturn_json.pyに実行権限がないために`403 forbidden error`になりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m
288
+
289
+
290
+
291
+ #
292
+
293
+
294
+
295
+ 2018/1/13(土)追記:
296
+
297
+
298
+
299
+ `jsonp`という指定方法があるみたいですね。
300
+
301
+ [dendenmushi様の次の質問](https://teratail.com/questions/108809)のおかげで知ることができました。ありがとうございます。m(_ _)m
302
+
303
+
304
+
305
+ 適当なこと(取り消し線内部)を書いて勝手に決めつけてかかりすみません…(本質問2回目の失敗…(^ ^;)
306
+
307
+
308
+
309
+ 以下適当に検索をかけてヒットしたサイトです。この回答を見た人のために一応載せるという感じで特に意味はないです。
310
+
311
+
312
+
313
+ - [クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://www.slideshare.net/mobile/kitfactory/web-api-34814937)
314
+
315
+
316
+
317
+ - [Ajaxのjsonp・callbackの仕組みについて解説します。](http://javatechnology.net/ajax/jsonp-callback/)

3

ミスの編集、他

2018/01/13 12:55

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -96,7 +96,7 @@
96
96
 
97
97
 
98
98
 
99
- ##
99
+ ##検証用コード
100
100
 
101
101
 
102
102
 
@@ -106,7 +106,7 @@
106
106
 
107
107
  /
108
108
 
109
- ┣ cgj-bin/
109
+ ┣ cgi-bin/
110
110
 
111
111
  ┃ ┣ data.json
112
112
 

2

追記

2018/01/08 16:40

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -68,4 +68,220 @@
68
68
 
69
69
 
70
70
 
71
- 私の環境ではこれでうまくいきましたがどうでしょうか？
71
+ 私の環境ではこれでうまくいきましたがどうでしょうか？(※注 追記: コメント欄みてください。m(_ _)m)
72
+
73
+
74
+
75
+ ##追記
76
+
77
+
78
+
79
+ 私はサーバーには全く明るく無いのですけど、原因がわかりましたので追記させてください。
80
+
81
+
82
+
83
+ `クロスドメイン制約`(参考:[【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita](https://qiita.com/growsic/items/a919a7e2a665557d9cf4))が今回の諸悪(むしろ悪いのは我々ですが笑)の根源のようです。
84
+
85
+
86
+
87
+ ローカルサーバーを立ち上げた場合はもちろん、ローカルファイル(file://)からの実行でも同様のエラーが生じるみたいですね。html文書を介さずそのままアクセスする場合はこの限りでは無いのでしょう。
88
+
89
+
90
+
91
+ とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。
92
+
93
+
94
+
95
+ または先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
96
+
97
+
98
+
99
+ ##
100
+
101
+
102
+
103
+ ディレクトリ構成
104
+
105
+
106
+
107
+ /
108
+
109
+ ┣ cgj-bin/
110
+
111
+ ┃ ┣ data.json
112
+
113
+ ┃ ┗ return_json.py
114
+
115
+ ┣ index.html
116
+
117
+ ┗ server.py
118
+
119
+
120
+
121
+ data.json
122
+
123
+
124
+
125
+ ```json
126
+
127
+ [
128
+
129
+ {
130
+
131
+ "version": "1.5",
132
+
133
+ "codename": "Cupcake"
134
+
135
+ },
136
+
137
+ {
138
+
139
+ "version": "1.6",
140
+
141
+ "codename": "Donut"
142
+
143
+ },
144
+
145
+ {
146
+
147
+ "version": "4.4",
148
+
149
+ "codename": "KitKat"
150
+
151
+ }
152
+
153
+ ]
154
+
155
+ ```
156
+
157
+
158
+
159
+ return_json.py
160
+
161
+
162
+
163
+ ```python
164
+
165
+ #!/usr/bin/env python
166
+
167
+ # -*- coding: UTF-8 -*-
168
+
169
+
170
+
171
+ with open('data.json') as f:
172
+
173
+ json = f.read()
174
+
175
+
176
+
177
+ print('Content-type: application/json\n')
178
+
179
+ print(json)
180
+
181
+ ```
182
+
183
+
184
+
185
+ index.html
186
+
187
+
188
+
189
+ ```html
190
+
191
+ <!DOCTYPE html>
192
+
193
+ <html>
194
+
195
+ <head>
196
+
197
+ <meta charset="UTF-8">
198
+
199
+ <title>107356</title>
200
+
201
+ </head>
202
+
203
+ <body>
204
+
205
+ <table id="a" border=1>
206
+
207
+ <tr>
208
+
209
+ <th>version</th>
210
+
211
+ <th>codename</th>
212
+
213
+ </tr>
214
+
215
+ </table>
216
+
217
+
218
+
219
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
220
+
221
+ <script>
222
+
223
+ $.ajax({
224
+
225
+ type: 'GET',
226
+
227
+ url: './cgi-bin/return_json.py',
228
+
229
+ dataType: 'json'
230
+
231
+ }).then(
232
+
233
+ function(json){
234
+
235
+ var a = $("#a");
236
+
237
+ json.forEach(function(val){
238
+
239
+ a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
240
+
241
+ });
242
+
243
+ },
244
+
245
+ function(){
246
+
247
+ alert('ERROR');
248
+
249
+ }
250
+
251
+ );
252
+
253
+ </script>
254
+
255
+ </body>
256
+
257
+ </html>
258
+
259
+ ```
260
+
261
+
262
+
263
+ server.py
264
+
265
+
266
+
267
+ ```python
268
+
269
+ from http.server import HTTPServer, CGIHTTPRequestHandler
270
+
271
+
272
+
273
+ class Handler(CGIHTTPRequestHandler):
274
+
275
+ cgi_directories = ["/cgi-bin"]
276
+
277
+
278
+
279
+ httpd = HTTPServer(("", 8080), Handler)
280
+
281
+ httpd.serve_forever()
282
+
283
+ ```
284
+
285
+
286
+
287
+ このまま実行するとおそらくreturn_json.pyに実行権限がないために`403 forbidden error`になりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m

1

コードの編集

2018/01/08 16:25

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -18,7 +18,17 @@
18
18
 
19
19
  <body>
20
20
 
21
- <div id="a"></div>
21
+ <table id="a" border=1>
22
+
23
+ <tr>
24
+
25
+ <th>version</th>
26
+
27
+ <th>codename</th>
28
+
29
+ </tr>
30
+
31
+ </table>
22
32
 
23
33
 
24
34
 
@@ -40,7 +50,7 @@
40
50
 
41
51
  json.forEach(function(val){
42
52
 
43
- a.append("<div>version: " + val.version + "</div><div>codename: "+ val.codename + "</div><br />");
53
+ a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
44
54
 
45
55
  });
46
56