JavaScriptでJsonファイル読み込み時にエラー

JavaScriptでJsonファイルを読み込み中身を取り出したいのですが、そのときにエラーが出て困っています。

具体的にはのresult.htmlのJSON.parse(this.responseText)で以下の様なエラーが出ています。

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at HTMLButtonElement.<anonymous

以下はresult.html、result.js、result.jsonです。
またA君,111,りんご、false、B君、222、ぽち、true、C君、333、車という風に表示したいのですが、どの様にしたら良いのでしょうか。
よろしくお願いします。

<!DOCTYPE html>

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>あああ</title>
</head>

<body>
    <div>
        <h1>Sample</h1>
    </div>
    <div><button id="can" type="button">ボタン</button></div>
   <script type="text/javascript" src="js/result.js"></script>
  </body>
</html>

var xmlHttpRequest;
    document.getElementById("can").addEventListener("click", function() {
        xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("get", "result.json", true);
              var response = JSON.parse(this.responseText);
              alert(response.statement[2].name);
    }, false);

{
  "statement":[
    {"name":"A君",
      "data":"111",
      "word":"りんご"},
    {"name":"B君",
      "data":"222",
      "word":"ぽち"},
    {"name":"C君",
      "data":"333",
      "word":"車"}
  ],
  "judge":[
    false,
    true
    ]
}

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

回答2件

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

上記ドキュメントを見てみましたが、XMLHttpRequestはopen()だけでは実際にリクエストを行わず、その後にsend()をする必要があるみたいです。

javascript
1var xmlHttpRequest;
2document.getElementById("can").addEventListener("click", function() {
3    xmlHttpRequest = new XMLHttpRequest();
4    xmlHttpRequest.open("get", "result.json", false);
5    xmlHttpRequest.send();
6    var response = JSON.parse(xmlHttpRequest.responseText);
7    alert(response.statement[2].name);
8}, false);

これで動作はします。

※やっつけで書いた非同期処理版です

javascript
1var xmlHttpRequest;
2document.getElementById("can").addEventListener("click", function() {
3    xmlHttpRequest = new XMLHttpRequest();
4    xmlHttpRequest.onreadystatechange = function(e) {
5        var xhr = e.target;
6        if (xhr.readyState == 4) {
7            var response = JSON.parse(xhr.responseText);
8            alert(response.statement[2].name);
9        }
10    };
11    xmlHttpRequest.open("get", "result.json", true);
12    xmlHttpRequest.send();
13}, false);

投稿2017/01/11 17:56

attakei

総合スコア2738

tomato0

2017/01/11 18:03

どちらでも同じ様なエラーが出るのですが、これはjsonファイルが正しくないということなのでしょうか？ https://gyazo.com/7b52e1038f4510f9ab8185fef51874f9

attakei

2017/01/11 18:10

ローカルで直接html+jsで動かす場合、XMLHttpRequestはそのままでは動きません。何かしらの形で、webサーバ経由でアクセスする必要があります。なお、一番最初に出力されるのはエラーではなくopenの引数にfalseを指定した際の警告です。警告が出る理由などについては、上記記載済みのドキュメントや警告に出力されるURLを参照してください。

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

this.responseTextじゃなxmlHttpRequest.responseTextとしないと。

投稿2017/01/11 17:18

turbgraphics200

総合スコア4267

tomato0

2017/01/11 17:24

エラー内容が少し変わるだけです。 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at HTMLButtonElement.<anonymous>

turbgraphics200

2017/01/11 17:25

JSON.parse()している行にブレークポイントはってresponseTextの内容を確認してください。

tomato0

2017/01/11 17:37

どうやら中身がないようです・・・ https://gyazo.com/209518f9244fd4b8bfb902774ce64faf

turbgraphics200

2017/01/11 17:42

てか、いまきづいたけど、同期的に取得したいのなら、 xmlHttpRequest.open("get", "result.json", true); のところは xmlHttpRequest.open("get", "result.json", false); としないといけません。

tomato0

2017/01/11 17:50

変更してみましたが、下のエラーが追加されるだけです。何度も回答して頂いてすいません。 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

turbgraphics200

2017/01/11 17:53 編集

エラーじゃなく警告で、実行自体はできてるはずですが。まあ、警告が示すように同期取得はやらないほうがいいですが。

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

あなたの回答