Forum Discussion

Iron Contributor

Jun 12, 2018

How to add a counter to a SPFX app?

Hi, I have being working with a web part in SPFX that get the events in a calendar and show them in a page. Right now I am available to show the comming events and are sorted by EventDate. What ...

developer

cprothero

Iron Contributor

Jun 13, 2018

I would do it at the time that you do the query to fill ISPList[] . Are you using REST to get the events? If so, you can add $top to the query (and also do the sort at that point).

If not, you can do a for loop, instead of foreach.

for (var i = 0; i < COUNTER; i++) {

        console.log(items[i].EventDate);

}

Americo Perez

Iron Contributor

Jun 13, 2018

Thanks!!

I am getting closer!

I was thinking that if I can use orderby = EventDate asc to sort the list, it would be possible to filter by EventDate so I can eliminate the if-sat to get the comming events only, so I tried this:

private _getListData(): Promise<ISPLists> {
   let toDay = moment().format("L");
       return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('${this.properties.calendarName}')/Items?$filter=EventDate ge datetime'" + toDay + "'$orderby= EventDate asc`, SPHttpClient.configurations.v1)
            .then((response: SPHttpClientResponse) => {
                    return response.json();
             });
      }

But it seems that I am doing it wrong because nothing get filtered, I am getting all the events (both the old ones and the comming ones).

How should I use the filter?

Best regards

Americo

cprothero
Iron Contributor
Jun 14, 2018
I have a very similar query. I have to use .toISOString();

$filter=EventDate ge datetime''' + today.toISOString() + "'&$orderby=EventDate&$top=10
Otherwise seems good. You can put that whole URL directly into a browser window to help tweak and see more specific error messages.