在 JavaScript 中使用循环仅显示最新的 3 个结果

Posted 2023-05-09

【中文标题】在 JavaScript 中使用循环仅显示最新的 3 个结果

【英文标题】：Show only the latest 3 results using a loop in JavaScript

【发布时间】：2019-01-02 08:36:53

【问题描述】：

我有一个脚本可以提取结果并将其显示在我的网站上。我只想显示被拉出的最后三个结果，而不是所有结果。所以最新的结果是Test2、Test1，然后是 Office 365 计划服务。

这里是所有被拉取的结果：

这是我的 javascript 代码：

$(document).ready(function()
    $pnp.setup(
        baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
    );

    $pnp.sp.web.lists.getByTitle("O365RoadMap").items.orderBy("Created", false).get().then(function(items) 
        console.log(items);
        var result = items.map(item => 
            return 
                Title: item.Title,
                Description: item.Description,
                Link: item.Link
            
        );
        var $table = roadMapDisplay(result);
        console.log($table);
        $('#title').html($table);
    );

    function roadMapDisplay(items) 

        var table = $('<container/>');

        items.forEach(item => 
            table.append(`<a href="$item.Link" target="_blank" style="font-size: larger;">$item.Title</a>`);
            table.append(`<div style="text-indent: 10px">$item.Description.slice(0, -200)...</div>`);
            table.append('<br/>');
        );
        return table;
    
);

我怎么能在那个函数上抛出一个循环呢？我尝试了很多不同的方法，但都失败了。

提前谢谢大家！

【问题讨论】：

堆栈片段用于 runnable 示例。在您的示例中单击运行会产生错误。请编辑 sn-p 使其可运行并演示问题，或者仅使用代码块。

抱歉，Crowder，它无法运行，因为它使用内部共享点列表来填充数据并且受到限制。我只是想在函数 roadMapDisplay 运行 3 次的地方抛出一个循环。

您可以使用setTimeout 和静态数据轻松模拟。

roadMapDisplay 构建一个包含所有结果的表。当然，您不想调用它三次；你只想用三个项目调用一次......？

抱歉，这就是我的意思，因此设置了 Microsoft Flow 以从列表中获取最新数据。现在它正在显示的列表中有 4 行。我希望能够只显示最新的 3。

【参考方案1】：

以下是特定于数组的。但是，似乎有一个$pnp-specific answer 在我看来应该更有效。

---

假设您当前的代码有效（显示完整列表），您可以像这样获取items 中的前三个条目：

items = items.slice(0, 3);

...或者最后一个三个像这样：

items = items.slice(-3);

【讨论】：

让我试试这个！

我试过了，只显示最新的三个并没有成功，它仍然显示为 4 个项目。感谢您的帮助。

“切片”功能不可能有bug。你在那里做了别的事情。将您的新代码添加到问题中，以便我们查看。

让它工作，items.slice(0, 3).forEach(item => - 上面的代码在 Crowder 中不起作用，但在 forEach 循环完美运行之前包含它。感谢 Crowder 的提醒！

@SaintLouisEvents - “上面的代码不起作用......”嗯，这取决于你在哪里使用它，但它只是指示性，不是复制粘贴解决方案。

【参考方案2】：

我猜测 $pnp 是基于在线快速搜索的带有 jQ​​uery In SharePoint 的 PnP JavaScript 库。

我对 PnP 了解不多；但是，我在https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items 中注意到了这个文档：

// 使用 odata 运算符进行更高效的查询

$pnp.sp.web.lists.getByTitle("My List").items.select("Title", "Description").top(5).orderBy("Modified", true).get() .then((items: any[]) => 控制台.log（项目）； );

如您所见，他们使用的是“top(5)”；因此，您可以更改顺序，首先获取最后一个元素，然后使用 top(3) 获取您希望显示的这三个记录。

由于$pnp似乎遵循链式模式，不知道您是否可以在获得top(3)后再次应用order方法。

【讨论】：

这应该是对the existing $php answer的编辑。

感谢@carlstein 的贡献！ Negi 确实提到了 PnP 中的 top() 属性，这正是它需要做的事情。

【参考方案3】：

要保留两个数组：

var items = [1,2,3,4,5,6]
var n = 3
var remainingArray = items.splice(0, items.length-n);

console.log(remainingArray)//<--first n elements
 
console.log(items)//<--last n elements

【讨论】：

感谢Emeeus的贡献！我得到了答案，但我会将其保留在我的笔记中，以备将来需要。

【参考方案4】：

我认为您正在寻找这个。如果我们的查询总是返回前三项，那么为什么我们要明确地使用 javascript？

$pnp.sp.web.lists.getByTitle("O365RoadMap").items.top(3).orderBy("Created", false).get().then(function(items) 
console.log(items);
);

您可以从here获得更多知识

【讨论】：

感谢这个 Negi！我对 PnP 不太熟悉，所以我在笔记中记录了这一点。

没关系，伙计...如果您需要进一步的帮助，可以问我@SaintLouisEvents

也许链接到描述top 用法的文档会很有用。 :-)

我在我的项目中使用过，所以我记得@T.J.Crowder :)

不清楚如何解决链接文档的建议。