1
JavaScriptから情報を取得する方法と、ユーザーがチームを選択してプレイヤーに関する情報が表示される単純なアプリケーションを実行する方法を学習しています。検索ボタンをクリックするとUncaught SyntaxError: Unexpected end of JSON inputと表示されます。私はコードを何回も使ってきましたが、私はエラーを発見しません。それ以外の場合、コードは私が求めている情報を表示します。エラーはprocess_playerとsearchPlayerにあるようです。Javascript：Uncaught SyntaxError：JSON入力の予期しない終了
Jslintは、2回の警告を示すが、それらのどれもが問題に関連し、私が思うに、ではありません：
Unexpected 'for'.
for(var i = 0; i < teams.length; i++) {
Unexpected 'var'.
for(var i = 0; i < teams.length; i++) {
誰かが私が間違ってここにやっているか説明していただけますか？
HTMLコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Football statistic</title>
</head>
<body>
<div id="input">
<form>
<select id="myteam">
<option>Select your team</option>
</select>
<input type="button" id="search_button" value="Search">
</form>
</div>
<div id="output"></div>
<script src="js/script.js"></script>
</body>
</html>
JSコード：
var teams = [];
function find_team(team_code) {
for(var i = 0; i < teams.length; i++) {
if(teams[i].code === team_code) {
return teams[i];
}
}
return undefined;
}
var process_form = function(team_code) {
var team = find_team(team_code);
var player_link = team._links.players;
player = player_link.href;
};
// write new function to process player
var process_player = function() {
var data = JSON.parse(xhttp2.response);
var item = data.players;
for (var i = 0; i<item.length; i++) {
person = item[i];
name = person.name;
value = person.marketValue;
country = person.nationality;
position = person.position;
processFormPlayer(name);
processFormPlayer(value);
processFormPlayer(country);
processFormPlayer(position);
};
}
var processFormPlayer = function(text) {
body = document.getElementById("output");
var add = document.createTextNode(text);
var paragraph = document.createElement("p");
paragraph.appendChild(add);
body.appendChild(paragraph);
}
var processXHRResponse = function() {
var data = JSON.parse(xhttp.response);
teams = data.teams;
for (var i = 0; i < teams.length; i++) {
team = teams[i];
name = team.name;
dropdownElement = document.createTextNode(name);
option = document.createElement("option");
option.value = team.code;
option.appendChild(dropdownElement);
document.getElementById("myteam").appendChild(option);
};
}
var encodeParameters = function(params) {
var strArray = [];
for(var key in params) {
if(params.hasOwnProperty(key)) {
var paramString = encodeURIComponent(key) + "/" + encodeURIComponent(params[key]);
strArray.push(paramString);
}
}
return strArray.join("&");
}
// the parameters for the API request
var parameters = {
competitions: 426,
}
// auth Token obtainable from http://api.football-data.org/register
var authToken = "2fe40f6ab37b43cca925d6fac9b05a0e";
// do the XHR request
var base_url = "http://api.football-data.org/v1/";
var query_url = base_url + encodeParameters(parameters) + "/" + "teams";
var xhttp = new XMLHttpRequest();
xhttp.addEventListener("load", processXHRResponse);
xhttp.open("GET", query_url);
xhttp.setRequestHeader("X-Auth-Token", authToken);
xhttp.send();
var doSearch = function() {
var search_term = document.getElementById("myteam").value;
process_form(search_term);
}
var searchPlayer = function() {
xhttp2 = new XMLHttpRequest();
xhttp2.addEventListener("load", process_player);
xhttp2.open("GET", player);
xhttp2.setRequestHeader("X-Auth-Token", authToken);
xhttp2.send();
process_player();
}
window.onload = function() {
var search_button = document.getElementById("search_button");
search_button.addEventListener("click", doSearch);
search_button.addEventListener("click", searchPlayer);
}
ありがとうございます！
アドオン 'はconsole.log（xhttp.response）' JSON.parse' –
'前に、それは言っている：あなたはそれが構文的に有効になる前に終了JSONを解析することを求めているので、「捕捉されないでSyntaxErrorをJSON入力の予期しない終わり」それがそうするために。あなたが私たちにJSONを見せてくれていないので、なぜあなたはなぜそれを理解するのに役立つことはできません。 –
JSON.parseも空の文字列の例外をスローします – Bindrid