Question

我已经浏览过这里和其他一些网站，以正确的方式从外部json链接创建HTML表格，并提出了以下内容。

我正在尝试提取用户名和投票数并在表格中显示，创建了多行，所有行都填充了＆＃34; undefined＆＃34;。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>TEST</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<table class="table table-bordered table-striped table-hover" id="ragnarok_table">
			<tr>
				<th>Username</th>
				<th>Votes</th>
			</tr>
		</table>
	</div>
<script>
$(document).ready(function(){
	$.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=[REMOVED]&month=current&format=json", function(data){
		var ragnarok_data = '';
		$.each(data, function(val){
			ragnarok_data += '<tr>';
			ragnarok_data += '<td>'+val.nickname+'</td>';
			ragnarok_data += '<td>'+val.votes+'</td>';
			ragnarok_data += '</tr>';
		});
		$('#ragnarok_table').append(ragnarok_data);
	});
});
</script>			
</body>
</html>

＆＃13;

我可以看到其他人也遇到过这个问题，但是，这是我第一次潜入Javascript;其他问题有完全不同的代码，答案似乎不适用于此。非常感谢任何帮助，谢谢。

Answer 1

只需在.forEach上使用data.voters。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-striped table-hover" id="ragnarok_table">
      <tr>
        <th>Username</th>
        <th>Votes</th>
      </tr>
    </table>
  </div>
  <script>
    $(document).ready(function() {
      $.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
        var ragnarok_data = '';
        data.voters.forEach(function (val) {
          ragnarok_data += '<tr>';
          ragnarok_data += '<td>' + val.nickname + '</td>';
          ragnarok_data += '<td>' + val.votes + '</td>';
          ragnarok_data += '</tr>';
        });
        $('#ragnarok_table').append(ragnarok_data);
      });
    });
  </script>
</body>

</html>

或者，如果您在jQuery上设置了死区，请将$.each修改为您希望数据来自data.voters的数组，并正确获取值：

$.each(data.voters, function (ignore, val) {

第二个参数是值，第一个参数是索引。点击此处了解更多信息：

https://api.jquery.com/jQuery.each/

Answer 2

您可以使用.each，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link re="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-striped table-hover" id="ragnarok_table">
      <tr>
        <th>Username</th>
        <th>Votes</th>
      </tr>
    </table>
  </div>
  <script>
    $(document).ready(function() {
      $.getJSON("https://ark-servers.net/api/?object=servers&element=voters&key=R72Uo7jcAXCVBjx1eGtDm8itWlrU59GHnuy&month=current&format=json", function(data) {
        var ragnarok_data = '';
        /*data.voters.forEach(function (val) {
        */
        $(jQuery.parseJSON(JSON.stringify(data.voters))).each(function() {  
          ragnarok_data += '<tr>';
          ragnarok_data += '<td>' + this.nickname + '</td>';
          ragnarok_data += '<td>' + this.votes + '</td>';
          ragnarok_data += '</tr>';
        });
        $('#ragnarok_table').append(ragnarok_data);
      });
    });
  </script>
</body>

</html>

getJSON脚本返回＆＃34; undefined＆＃34;

2 个答案: