I recently integrated a JSON API that fetches event data. Here's a snippet of the JSON structure:
{
"id":1,
"status":"ok",
"start":{
"date":"2021-01-16"
}
}
To display this data in HTML, I wrote this simple script:
var url = 'https://api.com/calendar.json';
$.getJSON(url, function(data) {
var events = data.resultsPage.results.event;
console.log(events);
events.forEach(function(item, index, array) {
var event_month = moment(array[index].start.date).format('MMM');
var event_day = moment(array[index].start.date).format('D');
var event_date = '<div class="event-date">'+ event_month +' '+ event_day +'</div>';
var event_performer = array[index].performance[0].artist.displayName;
var event_venue = array[index].venue.displayName;
var event_city = array[index].location.city;
var event_link = array[index].uri;
var event_details = '<div class="event-location"><div class="event-city">' + event_city + '</div></div><div class="event-venue">' + event_venue + '</div><div class="event-info"><a href="' + event_link + '" target="_blank" class="btn btn--tertiary btn--small">TICKETS</a></div>';
if(event_month != 'Invalid date' && event_day != 'Invalid date' && array[index].status === 'ok') {
$('.tour-grid').append('<div class="item">' + event_date + event_details + '</div>');
}
});
});
The issue I'm facing now is filtering out events with a status of 'cancelled'. The current JavaScript code displays all events regardless of their status.
Is there a way to adjust the code so that only events with a 'status' of 'ok' are shown in the HTML output, and any events marked as 'cancelled' are excluded?