如何将 Array.length 从对象内部渲染到 html 页面？答案

【问题标题】：How to render Array.length from inside of object to html page?如何将 Array.length 从对象内部渲染到 html 页面？
【发布时间】：2022-01-19 00:46:58
【问题描述】：

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

{_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

我的失败尝试：我将此输出分配给一个变量，并尝试通过这样做循环并输出：

$.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>

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

【问题讨论】：

你为什么回到for里面？
$('.injured_players').html(string) 会将具有“injured_players”类的 first 元素的 HTML 设置为给定的字符串。将该行代码移入for 循环并使其成为$('.injured_players').eq(i).html(string)。删除 return 行，因为它会立即退出函数。
另外，您应该在控制台中遇到错误。 injuredPlayers 是一个数字，而数字没有 length 属性，所以你应该在 i < injuredPlayers.length 上得到一个错误。
@HereticMonkey 不，这不会是一个错误，(5).length 只是undefined，而i < undefined 永远不会是真的。
eq(i) 获取索引i 处的元素。 .html(string) 将 HTML 设置为 string 的任何值。

标签： javascript jquery arrays

【解决方案1】：

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

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

您的另一个错误是您试图在正确的 html 标记中动态显示值，但同时为每个 span 标记设置值。所以在你的循环结束后，他们都会说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 调用做出假设。从您的 api 调用在您的响应中存储 flaggedToken 数组的长度的方式来看，似乎每个 ajax 响应都返回一个带有受伤球员数组的对象，并且您将有 4 个单独的 api 调用。但是，如果不是这种情况并且响应返回一个对象数组，您将需要遍历该数组并一次获取一个每个对象中每个数组的长度。然后，您也可以忽略我的建议，将 injuredPlayersArray 的声明移到 api 调用之外。我编写的第二个 for 循环将进入 inside api 调用。

【讨论】：