###前提・実現したいこと
デスクトップにHTMLファイルを作り、そこから同階層にjavascriptファイルを作り、そのjavascriptは、WEBAPI通信を行い、JSONで受け取り表示するコード記載をしており、結果的に、HTMLをブラウザ表示すれば、JSONデータが並んで表示されるものをみたいと思っています。

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

目当てのJSONデータが表示されません。

Assetsフォルダの直下に以下HTMLファイルがあります。
###該当のソースコード
ファイル名 testjump.html

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3
4<head>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
7
8	<title></title>
9
10	<script src="architect://architect.js"></script>
11	<script type="text/javascript" src="../ade.js"></script>
12
13	<link rel="stylesheet" href="css/default.css">
14</head>
15
16<body>
17	<script>assets/jsRead.js</script>
18
19	<script src="assets/jsRead.js"></script>
20
21<script>
22$.ajax({
23  type: 'GET',
24  url: 'https://iwb.jp/s/js/data.json',
25  dataType: 'json',
26  success: function(json){
27    var len = json.length;
28    for(var i=0; i < len; i++){
29      $("#a").append(json[i].version + ' ' + json[i].codename + '<br>');
30    }
31  }
32});
33</script>
34    <ul id="heros">
35        <li>testpromote</li>
36        <li>testpromote2</li>
37    </ul>
38</body>
39</html>

ファイル名 jsRead.js　htmlと同階層

javascript
1$.ajax({
2  type: 'GET',
3  url: 'https://iwb.jp/s/js/data.json',
4  dataType: 'json',
5  success: function(json){
6    var len = json.length;
7    for(var i=0; i < len; i++){
8      $("#a").append(json[i].version + ' ' + json[i].codename + '<br>');
9    }
10  }
11});

JSONの中身は

JSONの中身
1[
2
3    {
4        "version": "1.5",
5        "codename": "Cupcake"
6    },
7    {
8        "version": "1.6",
9        "codename": "Donut"
10    },
11    {
12        "version": "4.4",
13        "codename": "KitKat"
14    }
15]

htmlをブラウザに投げれば、上記JSONが表になって羅列して並ぶようになって欲しいです。アドバイスどうかよろしくお願い致します。

###アドバイス受けて実行したこと
kawaxさんのいうようにローカルサーバーを作りそこにhtmlを配置しました。（IIS）
C:\inetpub\wwwrootにindex.htmlとしてnamnium1125さんからのアドバイス通りのコードとしてブラウザ実行したところ、以下のような表示でした。

###参考にしているサイト
https://iwb.jp/jquery-ajax-jsonp/

###違ったコードで試した内容と結果

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>10</title>
6</head>
7<body>
8  <table id="a" border=1>
9    <tr>
10      <th>version</th>
11      <th>codename</th>
12    </tr>
13  </table>
14
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16  <script>
17$.ajax({
18  url: 'https://iwb.jp/s/js/data.json'
19})
20.then(
21  function(json) {
22    for(var i=0; i<json.length; i++) {
23      $('#a').append(json[i].version + ' ' + json[i].codename + '<br>');
24    }
25  },
26  function() {
27    $('#a').text('ERROR');
28  }
29);
30  </script>
31</body>
32</html

結果

コードに問題があるということでしょうか。JSONのURLじたいはブラウザ入力で実行すれば確かにJSONで返却されていますのでそこにも問題がないかと思います。引き続きよろしくお願い致します。

###蛇足
さくらVPSでLAMP環境ありまして、そこにhtmlを置いて（上のhtmlコード）も同様にヘッダしか表示できませんでした。

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

回答2件

htmlファイルを直接表示(file://)はセキュリティ的な色々で動かないので
なんでもいいのでローカルサーバーで動かしてみてください。

このくらいならPythonやPHPの簡易サーバーが簡単。
https://qiita.com/higuma/items/b23ca9d96dac49999ab9

投稿2018/01/02 15:19

kawax

総合スコア10377

dendenmushi

2018/01/02 15:36

そうなんです。それでいろいろ困っていました…。xamarinでjavascript組み込んでましてどうしてもローカルのhtmlを読んで受け取ったJSONをjavascriptで画面表示したくて困っていました。セキュリティ解除方法とか難しいのでしょうか。サーバーを用意するとなるとxamarinのテストがまたややこしくなりそうでして…。

dendenmushi

2018/01/03 14:33

サーバーを立てて行ってみます。お二方ありがとうございました。どちらもベストアンサーに選びたいのですが、直結した理由がサーバーの問題だったのでこちらに致します。

dendenmushi

2018/01/08 03:53

実際にローカルサーバーで動かすことでうまくいくと思うのですが、もしxamarinデバッグから実際にリリースとなった場合、そのプロジェクトにajaxがあった場合、しっかり表示してくれるものなのでしょうか。テストではあくまでローカルサーバーの準備で、本番ではhtmlとjavascriptを組み込ませてビルドしてGooglePlayなどのプラットフォームに公開すると、その組み込まれたajaxは機能してWEBAPIを表示してくれるのでしょうか。後付けながらもしよければ回答頂けないでしょうか。

dendenmushi

2018/01/08 11:02

ローカルサーバーで行っても同じようにヘッダーのみ表示されるようです。コードに間違いなどあるのでしょうか…。

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

ベストアンサー

真・解法の発見

散々追記した後になって初めて質問者様に挙げていただいた1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法を読み、さらにもうすでにクロスドメインについてこの記事で記述されていることに気づきショックを受けた上で、ようやく解法を見つけたので、上に載せます。何度も何度も追記してごめんなさい。一気にしろって感じですよね(^ ^;

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>107356</title>
6</head>
7<body>
8  <table id="a" border=1>
9    <tr>
10      <th>version</th>
11      <th>codename</th>
12    </tr>
13  </table>
14
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16  <script>
17  $.ajax({
18    type: 'GET',
19    url: 'https://iwb.jp/s/js/data.jsonp',
20    jsonpCallback: 'android',
21    dataType: 'jsonp'
22  }).then(
23    function(json){
24      var a = $("#a");
25      json.forEach(function(val){
26        a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
27      });
28    },
29    function(a,b,c){ // ここテキトーに書いてますので真に受けないでください。
30      alert('ERROR');
31      alert(a.status);
32      alert(b);
33      alert(c);
34    }
35  );
36  </script>
37</body>
38</html>

以下以前の回答。お恥ずかしい限りです。

<以前の回答>

まさか、#aが表す要素がなかったとかそんなオチじゃないでしょうね？

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>107356</title>
6</head>
7<body>
8  <table id="a" border=1>
9    <tr>
10      <th>version</th>
11      <th>codename</th>
12    </tr>
13  </table>
14
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16  <script>
17  $.ajax({
18    type: 'GET',
19    url: 'https://iwb.jp/s/js/data.json',
20    dataType: 'json',
21    success: function(json){
22      var a = $("#a");
23      json.forEach(function(val){
24        a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
25      });
26    }
27  });
28  </script>
29</body>
30</html>

私の環境ではこれでうまくいきましたがどうでしょうか？(※注追記: コメント欄みてください。m(_ _)m)

##追記

私はサーバーには全く明るく無いのですけど、原因がわかりましたので追記させてください。

クロスドメイン制約(参考:【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita)が今回の諸悪(むしろ悪いのは我々ですが笑)の根源のようです。

ローカルサーバーを立ち上げた場合はもちろん、ローカルファイル(file://)からの実行でも同様のエラーが生じるみたいですね。html文書を介さずそのままアクセスする場合はこの限りでは無いのでしょう。

とりあえず、解決法としては本末転倒かもしれませんけど、https://iwb.jp/s/js/data.jsonの先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。

~~または~~先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。

##検証用コード

ディレクトリ構成

/
┣ cgi-bin/
┃ ┣ data.json
┃ ┗ return_json.py
┣ index.html
┗ server.py

data.json

json
1[
2  {
3    "version": "1.5",
4    "codename": "Cupcake"
5  },
6  {
7    "version": "1.6",
8    "codename": "Donut"
9  },
10  {
11    "version": "4.4",
12    "codename": "KitKat"
13  }
14]

return_json.py

python
1#!/usr/bin/env python
2# -*- coding: UTF-8 -*-
3
4with open('data.json') as f:
5  json = f.read()
6
7print('Content-type: application/json\n')
8print(json)

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>107356</title>
6</head>
7<body>
8  <table id="a" border=1>
9    <tr>
10      <th>version</th>
11      <th>codename</th>
12    </tr>
13  </table>
14
15  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16  <script>
17  $.ajax({
18    type: 'GET',
19    url: './cgi-bin/return_json.py',
20    dataType: 'json'
21  }).then(
22    function(json){
23      var a = $("#a");
24      json.forEach(function(val){
25        a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
26      });
27    },
28    function(){
29      alert('ERROR');
30    }
31  );
32  </script>
33</body>
34</html>

server.py

python
1from http.server import HTTPServer, CGIHTTPRequestHandler
2
3class Handler(CGIHTTPRequestHandler):
4    cgi_directories = ["/cgi-bin"]
5
6httpd = HTTPServer(("", 8080), Handler)
7httpd.serve_forever()

このまま実行するとおそらくreturn_json.pyに実行権限がないために403 forbidden errorになりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m

2018/1/13(土)追記:

jsonpという指定方法があるみたいですね。
dendenmushi様の次の質問のおかげで知ることができました。ありがとうございます。m(_ _)m

適当なこと(取り消し線内部)を書いて勝手に決めつけてかかりすみません…(本質問2回目の失敗…(^ ^;)

以下適当に検索をかけてヒットしたサイトです。この回答を見た人のために一応載せるという感じで特に意味はないです。

</以前の回答>

投稿2018/01/02 15:20

編集2018/01/13 14:09

namnium1125

総合スコア2043

dendenmushi

2018/01/02 15:36

早速回答ありがとうございます。なぜか真っ白画面でした…。

namnium1125

2018/01/02 17:00 編集

あ〜、ごめんなさい私もよくわかって無い部分があったかも… タグにjs関連のものしかなかったので、html、jsの問題だと思い、#aの要素が見つけられず出力できていないのではと考え回答したのですが、xamarineとかになると正直わかんないです…(^ ^; よく考えないで回答していたかもしれません。私の回答は無視してくださって結構です。お力になれずすみません。もしまた何かわかったら返信します。m(_ _)m

dendenmushi

2018/01/02 23:08 編集

いえいえ私ももっと事情をたくさん追記すればよかったです。すいません。javascriptが私は苦手でしたのでサーバーもしくはセキュリティの問題さえ解決すればなんとかいくかもしれないという筋道ができました。感謝してます。ありがとうございます。

namnium1125

2018/01/08 16:30 編集

色々判明しましたので追記いたしました。よろしくお願いします。m(_ _)m 実は私はiPhoneのアプリを利用してコードを検証していたのですが、このアプリにはクロスドメイン制約の設定がなかったみたいで、フリーにバンバンアクセスできちゃってたみたいなんですよ。(^ ^; そこから勝手にどのブラウザでもできるだろうと検証を怠った件、ここでお詫びさせてください。すみませんでした！m(_ _)m

dendenmushi

2018/01/08 16:32

また再来して頂き本当にありがとうございます。目的として他のサイトが提供しているWebApiなのでそこのJSONファイルを自分のローカルに置くというのは難しそうですね…。しばし熟読させて下さい。ちょっとだけお返事遅れるかもしれません…。

namnium1125

2018/01/08 16:36

熟読中でしたらすみません、もし検証用にローカルで行なっているだけで、「jsonファイルがあるサーバー」=「完成したコードを置くサーバー」ならばクロスドメイン制約は発生しませんから、 Qiitaの記事にあるように一時的にブラウザをクロスドメイン制約が発生しないモードで立ち上げるだけでOKだと思います。

dendenmushi

2018/01/13 09:06

週末までドタバタで見れませんでした。今確認しました。検証して頂き本当に感謝です。クロスドメイン制約というものがあるのですね…。この関連の質問で別途環境が違うもので試すことも考えていまして、その質問のときも助言頂けたら幸いです。いろいろ調べて頂きありがとうございました。

dendenmushi

2018/01/13 13:02

私もよくわかっておらずコーディングしてました…。jsonp…。一緒に検討して頂きありがとうございます。引き続き何かあればよろしくお願い致します。

namnium1125

2018/01/13 14:05

なんか、もう、色々と、不甲斐ない回答者でごめんなさい！m(__)m

dendenmushi

2018/01/14 11:26

すごいこれで完璧取得できましたね。ありがとうございました。でもおかしいのが、私が作ったWebApi（http://decode2017iq155webapi20171********.azurewebsites.net/thi***/******thors/GetAllAuthors）は、語尾が.jsonではない型式のためかFiddlerで同じ形式のJSONが返されているはずなのに、真回答のコードでも表示してくれませんでしたね…。ASPで作られるものは別途JSONシリアライズなどのコードが必要なのか…。このデータ授受って本当に難しいですね…。いろいろありがとうございました。

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

あなたの回答