热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

Ihaveascriptthatpullsinresultsanddisplaysitonmysite.Iwanttodisplayonlythelastth

I have a script that pulls in results and displays it on my site. I want to display only the last three results that are being pulled instead of everything. So the latest results are Test2, Test1 and then Office 365 Planned Service.

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

Here are all the results being pulled:

以下是所有结果:

enter image description here

Here is my Javascript code:

这是我的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 = $('');

        items.forEach(item => {
            table.append(`${item.Title}`);
            table.append(`
${item.Description.slice(0, -200)}...
`); table.append('
'); }); return table; } });

How could I throw a loop onto that function? I've tried so many different ways and have come short.

我怎么能在这个函数上抛出一个循环?我已经尝试了很多不同的方法而且做得很短。

Thanks all in advance!

提前谢谢!

5 个解决方案

#1


0  

I think your are looking for this. if our query always returns top three items then why we explicitly goes to Javascript?

我想你正在寻找这个。如果我们的查询总是返回前三项,那么为什么我们明确转到Javascript?

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

#2


2  

The following is specific to arrays. However, it appears there's a $pnp-specific answer which it seems to me should be more efficient.

以下内容特定于数组。但是,似乎有一个特定于$ pnp的答案,在我看来应该更有效率。


Assuming your current code works (showing the full list), you can grab just the first three entries in items like this:

假设您当前的代码有效(显示完整列表),您可以只抓住以下项目中的前三个条目:

items = items.slice(0, 3);

...or the last three like this:

......或者最后三个像这样:

items = items.slice(-3);

#3


1  

I am guessing that $pnp is the PnP Javascript Library With jQuery In SharePoint based on a quick search online.

我猜这个$ pnp是基于在线快速搜索的jQuery In SharePoint的PnP Javascript库。

I don't know too much about PnP; however, I noticed this documentation in https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items:

我不太了解PnP;但是,我在https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items中注意到了这个文档:

// use odata operators for more efficient queries

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

$pnp.sp.web.lists.getByTitle("My List").items.select("Title", "Description").top(5).orderBy("Modified", true).get().then((items: any[]) => { console.log(items); });

$ pnp.sp.web.lists.getByTitle(“My List”)。items.select(“Title”,“Description”)。top(5)。orderBy(“Modified”,true).get()。then( (items:any [])=> {console.log(items);});

As you can see they are using "top(5)"; therefore, you could change the order, so you get first the last elements, then use top(3) to obtain those three records you wish to display.

正如你所看到的,他们正在使用“top(5)”;因此,您可以更改顺序,因此首先获得最后一个元素,然后使用top(3)获取要显示的三个记录。

Since $pnp seems to follow a chain pattern, I wonder if you could apply again the order method after obtaining the top(3).

由于$ pnp似乎遵循链式模式,我想知道你是否可以在获得top(3)后再次申请订单方法。

#4


1  

To keep two arrays:

要保留两个数组:

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

#5


-1  

Got the three latest results by updating this part with a slice attribute. Works perfectly now.

通过使用切片属性更新此部件获得了三个最新结果。现在工作得很好。

items.slice(0, 3).forEach(item => {

推荐阅读
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • Android JSON基础,音视频开发进阶指南目录
    Array里面的对象数据是有序的,json字符串最外层是方括号的,方括号:[]解析jsonArray代码try{json字符串最外层是 ... [详细]
  • 本文探讨了C语言中指针的应用与价值,指针在C语言中具有灵活性和可变性,通过指针可以操作系统内存和控制外部I/O端口。文章介绍了指针变量和指针的指向变量的含义和用法,以及判断变量数据类型和指向变量或成员变量的类型的方法。还讨论了指针访问数组元素和下标法数组元素的等价关系,以及指针作为函数参数可以改变主调函数变量的值的特点。此外,文章还提到了指针在动态存储分配、链表创建和相关操作中的应用,以及类成员指针与外部变量的区分方法。通过本文的阐述,读者可以更好地理解和应用C语言中的指针。 ... [详细]
  • 本文详细介绍了Spring的JdbcTemplate的使用方法,包括执行存储过程、存储函数的call()方法,执行任何SQL语句的execute()方法,单个更新和批量更新的update()和batchUpdate()方法,以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ... [详细]
author-avatar
汪健宜婉瑜
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有