如何将 Array.length 从 object 内部渲染到 html 页面？

Question

我正在使用 jQuery 并通过使用 $.ajax 得到 API 的响应。 我想从每个 object 内部获取 Arrays 长度并将其显示在 html 页面中。 这是我到目前为止所做的。 这是 API 响应，我对最后一个 object 进行了细分，其中包含一个数组和玩家名称：

{_type: "InjuredPlayers", flaggedTokens: Array(1)} //1 injured player name
{_type: "InjuredPlayers", flaggedTokens: Array(3)} //3 injured players names
{_type: "InjuredPlayers", flaggedTokens: Array(5)} //5 injured players names
{_type: "InjuredPlayers", flaggedTokens: Array(2)} //2 injured players names
>flaggedTokens:Array(2)
  >0:{offset: 0, token: "John", type:"UnknownToken"}
  >1:{offset: 1, token: "Adam", type:"UnknownToken"}
   length: 2
  >_proto_:Array(0)
  _type: "InjuredPlayers"
>_proto_: Object

为了获取数组的长度，我可以根据此Get length of array inside object执行这两种方法中的任何一种

console.log(response.flaggedTokens.length)
1
3
5
2

或者

console.log(response["flaggedTokens"].length)
1
3
5
2

我的失败尝试：我将此 output 分配给一个变量，并尝试通过执行以下操作循环和 output：

$.ajax(gameResponse).done(function(response) {
  let injuredPlayers = response.flaggedTokens.length;
  let injuredPlayersArray = [];

  for (let i = 0; i < injuredPlayers.length; i++) {
     injuredPlayersArray.push(injuredPlayers[i])
  }
  $('.injured_players').html(injuredPlayersArray[i])
})

<div class="container">
Team One Total number:  <span class="injured_players"></span>   //should be 1
Team Two Total number:  <span class="injured_players"></span>   //should be 3
Team Three Total number:<span class="injured_players"></span>   //should be 5
Team Four Toal number:  <span class="injured_players"></span>   //should be 2
</div>

显然我犯了一些错误，我自己似乎无法解决这个问题。 我希望有人能指导我正确的方向。

Answer 1

首先，在您的 for 循环中，您将返回 push 操作，但这是不必要的，它会在第一次迭代时终止循环。 此外，您已经将数组的长度设置为一个新变量，但是在您的 for 循环中，您尝试获取新变量的长度。 最后，您在injuredPlayersArray语句中声明了受伤玩家数组，但根据您的帖子，您收到了 4 个单独的 api 响应，因此它应该在您的 Z2705A83A5A0659CACE3458397Z267 响应之外声明，因此每次调用都不会被新调用覆盖。 而且您不需要 for 循环，因为您只使用一个数组。 这是它应该是什么样子。

let injuredPlayersArray = [];
$.ajax(gameResponse).done(function(response) {
  let injuredPlayers = response.flaggedTokens.length;
  injuredPlayersArray.push(injuredPlayers)
})

您的另一个错误是您试图在正确的 html 标记中动态显示值，但是您同时为每个跨度标记设置值。 所以在你的循环完成后，他们都会说2 。

要解决这个问题，您可以在所有 api 调用完成后添加一个 for 循环（也就是不在$.ajax().done()内）：

for (let i = 0; i < injuredPlayersArray.length; i++) {
  $('.injured_players').eq(i).html(injuredPlayersArray[i])
}

注意： .eq()返回一组与调用它的选择器匹配的 DOM 元素。 所以$('.injured_players')匹配页面和 for 循环中的 4 个元素，它会在该集合中找到第 i 个元素（因此索引 0 等于第一个 span 标签）并为该元素设置 html。

注意 2：我必须对您的 api 调用做出假设。 From the way your api call is storing the length of the flaggedToken array in your response, it seems each ajax response returns a single object with the array of injured players and that you will have 4 separate api calls. 但是，如果不是这种情况并且响应返回一个对象数组，您将需要遍历该数组并一次获取每个 object 中每个数组的长度。 然后，您也可以忽略我将受伤玩家数组的声明injuredPlayersArray调用之外的建议。 我写的第二个 for 循环是api调用中的 go 。