RSVPMakerfetch.html

<script>
class RSVPJsonWidget {
    constructor(divid, url, limit, morelink = '') {
        this.el = document.getElementById(divid);
        this.url = url;
        this.limit = limit;
        this.morelink = morelink;
        let eventslist = '';

  fetch(url)
  .then(response => {
    return response.json()
  })
  .then(data => {
    let showmorelink = false;
    if(Array.isArray(data))
        {
        if(limit && (data.length >= limit)) {
            data = data.slice(0,limit);
            showmorelink = true;
        }
        data.forEach(function (value, index, data) {
    if(!value.datetime)
        return '';
    var d = new Date(value.datetime);
    console.log('event '+ index);
    console.log(d);
    eventslist = eventslist.concat('<li><a href="' + value.guid + '">' + value.post_title + ' - ' + value.date + '</a></li>');
    });
        }
    else
        {
            this.el.innerHTML = 'None found: '+data.code;
            console.log(data);
        }
    if(eventslist == '')
       this.el.innerHTML = 'No event listings found';
    else
        {
            if(showmorelink && (morelink != ''))
                eventslist = eventslist.concat('<li><a href="'+morelink+'">More events</a></li>');
            this.el.innerHTML = '<ul class="eventslist rsvpmakerjson">'+eventslist+'</ul>';
        }
  })
  .catch(err => {
    this.el.innerHTML = 'Error fetching events from '+this.url;
    console.log(err);
});

    }
}
</script>
<div id="rsvpjsonwidget-222369">Loading &#8230;</div>
<script>
//parameters are ID of target div, url of JSON API endpoint,maximum number of posts to display, url for link to more events 
var jsonwidget222369 = new RSVPJsonWidget('rsvpjsonwidget-222369','https://rsvpmaker.com/wp-json/rsvpmaker/v1/future',10,'https://rsvpmaker.com/events/');
</script>