将JSON结果限制在数组中[重复]答案

【问题标题】：Limit JSON results in array [duplicate]将JSON结果限制在数组中[重复]
【发布时间】：2021-11-20 21:17:19
【问题描述】：

我正在调用一些 JSON 结果，其中列出了名为“cast”的数组中的一堆演员。我正在用这个 JS 调用该列表中的第一项......

let movieCredits = document.getElementById("movieCredits");
movieCredits.innerHTML = out.credits.cast[0].name;

并在这样的 div 中显示它们...

<div id="movieCredits"></div>

我需要列出前 5 个结果（不仅仅是第一个）。他们是一种简单的方法吗？

【问题讨论】：

JSON 是数据的文本表示。如果您可以使用out.credits.cast[0].name 访问数据，那么该数据不是 JSON，而是已经被解析并表示为对象、数组和原始值的数据。
JSON 结果按标题。

标签： javascript json

【解决方案1】：

您可以使用 Array.slice 创建一个包含前 5 个结果的新数组：

const firstFive = out.credits.cast.slice(0, 5)

然后您可以从中生成 HTML，具体取决于您想要做什么，例如

const listItems = firstFive.map(actor => `<li>${actor.name}</li>`);
movieCredits.innerHTML = `<ul>${listItems}</ul>`;

【讨论】：

喜欢这个？ movieCredits.innerHTML = out.credits.cast.slice(0, 5).name;那行不通……未定义。
这将尝试访问数组上的名称属性 - 您想访问每个数组元素上的名称属性。看看我的编辑。 @小写

【解决方案2】：

您的代码仅显式引用数组的元素 0...您需要能够引用前 5 个元素。然后，使用您引用的那个，您将 innerHTML 设置为那个东西...当您目前这样做，即使您循环遍历数组，您也会继续覆盖innerHTML。您要么需要在循环时构建一个单一的 innerHTML 字符串，然后进行最后的写入......要么在循环时创建新的 HTML 元素并将它们作为子元素添加到目标 div，就像我在下面的 sn-p 中所做的那样。

function populateCast() {

  var out = {};
  out.credits = {};
  out.credits.cast = [{
      name: 'actor_one'
    },
    {
      name: 'actor_two'
    },
    {
      name: 'actor_three'
    },
    {
      name: 'actor_four'
    },
    {
      name: 'actor_five'
    },
    {
      name: 'actor_six'
    },
    {
      name: 'actor_seven'
    }
  ];

  for (var i = 0; i < 5; i++) {
    var element = document.createElement("p");
    element.innerHTML = out.credits.cast[i].name;
    var target = document.getElementById('movieCredits');
    target.appendChild(element);
  }
}

<html>

<body>
  <div id="movieCredits"></div>
  <button id="castPopulate" onClick="populateCast()">Populate Cast</button>
</body>

</html>

【讨论】：