JSON 填充表的搜索功能

Question

我正在尝试实现一个搜索功能，使用户能够搜索这个表，该表是从公共 api 的 JSON 填充的。

我的表：

<input type="text" id="myInput" onkeyup="searchPlayers()" placeholder="Search for player">
<table id ="player_info">
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Team</th>
<th>Position</th>
<th>Current Price</th>
<th>Value Season</th>
<th>Cost Change from Start</th>
<th>Percentage selected by</th>
<th>Transfers In</th>
<th>Transfers Out</th>
<th>Total Points</th> 
<th>Points Per Game</th>
<th>Minutes</th>
<th>Goals Scored</th>
<th>Assists</th>
</tr>

从 JSON 填充表。 遍历 JSON 文件并为每个键创建一个新的表单元格。

request.onload = function() {
// Begin accessing JSON data here
var data = JSON.parse(this.response);

if (request.status >= 200 && request.status < 400) {

    var table = document.getElementById('player_info');

    data.elements.forEach(elements => {

    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + elements.id + '</td>' + 
        '<td>' + elements.first_name + '<p>' + '</p>' + elements.second_name + '</td>' + 
        '<td>' + elements.team_code + '</td>' + 
        '<td>' + elements.element_type + '</td>' + 
        '<td>' + elements.now_cost + '</td>' + 
        '<td>' + elements.value_season+ '</td>' + 
        '<td>' + elements.cost_change_start + '</td>' + 
        '<td>' + elements.selected_by_percent + '</td>' + 
        '<td>' + elements.transfers_in + '</td>' + 
        '<td>' + elements.transfers_out + '</td>' + 
        '<td>' + elements.total_points + '</td>' + 
        '<td>' + elements.points_per_game + '</td>' + 
        '<td>' + elements.minutes + '</td>' + 
        '<td>' + elements.goals_scored + '</td>' + 
        '<td>' + elements.assists + '</td>';

    table.appendChild(tr);
    });
}
//append_json(data);
console.log(data);
}

搜索玩家功能

function searchPlayers() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("player_info");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

有谁知道为什么这不起作用？

Answer 1

编辑：

使用本地下载的数据副本，我认为您的错误是这一行：

td = tr[i].getElementsByTagName("td")[0];

这是针对 PlayerId 列，而不是 PlayerName 列，应该是这样的：

td = tr[i].getElementsByTagName("td")[1];

看起来它现在可以工作了，但是您的过滤器需要一些改进才能考虑到非英语字符，例如Agüero中的Agüero 。 玩得开心，Fantasy API 是学习大量前端开发内容的好方法。

编辑2：

我把你的循环改成这样：

for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "table-row";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

我在显示的版本中添加了一个显示类型以确保它们得到更新，并且还删除了|| 从你的txtValue ：

txtValue = td.innerText;

原答案如下：

自从我显然使用 api 以来已经有几个赛季了。 您的 javascript 不一定有问题（尽管您的 HTML 表缺少thead和tbody元素），因为我收到了 CORS 错误：

CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

我没有时间弄清楚您需要在此处实施的解决方法，但是来自类似问题的这个答案可能会帮助您入门：

请求的资源上不存在“Access-Control-Allow-Origin”标头——尝试从 REST API 获取数据时

您最好执行我的旧应用程序所做的操作，因为此错误与尝试通过 AJAX 请求从远程资源获取数据有关，该资源具有网站所有者设置的 CORS 无访问权限。

您可以尝试使用上述方法解决它，但更好的解决方案是使用 PHP 或 .NET（或任何其他支持 CURL 或某种 HTTPGet 的后端语言）之类的东西在本地下载 json，然后使用 AJAX 访问本地 .json 文件。 还增加了更快的响应时间。 我会让它在 600 个左右的播放器 json 文件中循环并每隔一个小时将它们下载到磁盘上。