2016-09-02 20 views
0

新しいのjavascriptです。こんにちは世界を走らせる以外に何かをやろうとする私の最初の試みです。私は、URLから情報を取得して表示しようとしています。私はURLをチェックし、それはjsonを返す。 "Hello World"コードが実行されますが、スクリプトタグ内でjsonを取得するコードを追加するとすぐに何も起こりません。私は構文エラーを得ていません。Javascriptコードが実行されないのはなぜですか?

<!DOCTYPE HTML> 

<html> 

<body> 

    <p>Header...</p> 

    <script> 
    document.write("Hello World"); 

    var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("get", url, true); 
    xhr.responseType = "json"; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     callback(null, xhr.response); 
     } else { 
     callback(status); 
     } 
    }; 
    xhr.send(); 

}; 

    getJSON("http://api.tvmaze.com/schedule?country=US&date=2016-08-31", 
    function(err, data) { 
    if (err != null) { 
    alert("Something went wrong: " + err); 
    } else { 
    alert("Your query count: " + data.query.count); 
    } 
}); 

    </script> 
    <p>...Footer</p> 

</body> 

</html> 

答えて

3

私はあなたのhtmlとjsファイルとコンソールに1簡単に見て確認し、問題がこのライン

alert("Your query count: " + data.query.count); 

変更「data.query.count」を「data.lengthを」だったことを私に示しました。

alert("Your query count: " + data.length); 

エラーを検出する最も簡単な方法の1つは、コードをデバッグすることです。 あなたは、あなたのブラウザのコンソールを調べると、あなたのコードはUncaught TypeError: Cannot read property 'count' of undefinedのエラーを投げていることがわかりますbasiclyにシーン

enter image description here

+0

私は混乱の原因となったjsオンラインエディタを使用していました。回答を表示した後、アラートを修正すると( "クエリの件数:" + data.query.count ")、HTMLとして実行され、結果が得られました。ありがとうございました。 – OOPNewbie

0

の背後にあるものを検査するために、任意のブラウザをF12を打つことができます。

これは、応答配列の長さにdata.query.countでアクセスしようとしているためです。実際はdata.lengthである必要があります。

したがって、作業コードは次のようになります。

<!DOCTYPE HTML> 

<html> 

<body> 

    <p>Header...</p> 

    <script> 
    document.write("Hello World"); 

    var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("get", url, true); 
    xhr.responseType = "json"; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
    callback(null, xhr.response); 
     } else { 
    callback(status); 
     } 
    }; 
    xhr.send(); 

}; 

    getJSON("http://api.tvmaze.com/schedule?country=US&date=2016-08-31", 
    function(err, data) { 
    if (err != null) { 
    alert("Something went wrong: " + err); 
    } else { 
    alert("Your query count: " + data.length); 
    } 
}); 

    </script> 
    <p>...Footer</p> 

</body> 

</html> 
関連する問題