Javascript：未捕获的 SyntaxError：JSON 输入意外结束答案

【问题标题】：Javascript: Uncaught SyntaxError: Unexpected end of JSON inputJavascript：未捕获的 SyntaxError：JSON 输入意外结束
【发布时间】：2017-04-20 06:51:48
【问题描述】：

我正在学习 javascript 以及如何从 API 获取信息，并想做一个简单的应用程序，用户可以在其中选择球队并显示有关球员的信息。当我点击搜索按钮时，我得到Uncaught SyntaxError: Unexpected end of JSON input。我已经多次通过代码，但我没有发现错误。否则代码会显示我要求的信息。错误似乎在 process_player 和 searchPlayer 中。

Jslint 显示了两个警告，但我认为它们都与问题无关：

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);
}

谢谢！

【问题讨论】：

在JSON.parse之前添加console.log(xhttp.response)
它说“Uncaught SyntaxError: Unexpected end of JSON input”，因为您要求它解析在语法上有效之前结束的 JSON。由于您没有向我们展示 JSON，我们无法真正帮助您理解原因。
JSON.parse 也会为空字符串抛出异常
你打电话给process_player() 太早了。给它一个完成请求的机会！
难道 process_player 函数不会在 xhttp2 完成之前运行吗？

标签： javascript

【解决方案1】：

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();//you already attached this function as a listener
}

【讨论】：

我认为api响应还是有一些错误。其他方式这个错误很容易被忽略:)
它可以工作，没有任何错误，谢谢。很抱歉发帖，这很明显。