将JSON结果限制在数组中[重复]
Posted
技术标签:
【中文标题】将JSON结果限制在数组中[重复]【英文标题】：Limit JSON results in array [duplicate] 【发布时间】：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 结果按标题。
【参考方案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>【讨论】：
以上是关于将JSON结果限制在数组中[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Oracle SQL 中将结果限制为 1 行 [重复]