Javascript JSON到HTML排除某些值

我通过列出事件的API URL引入一些JSON。JSON看起来像这样

{
   "id":1,
   "status":"ok",
   "start":{
      "date":"2021-01-16"
   }
}

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') {
      $('.tour-grid').append('<div class="item">' + event_date + event_details + '</div>');
    }
  });
});

将其转换为HTML的简单脚本如下所示

{
   "id":1,
   "status":"ok",
   "start":{
      "date":"2021-01-16"
   }
}

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') {
      $('.tour-grid').append('<div class="item">' + event_date + event_details + '</div>');
    }
  });
});

var url='1〕https://api.com/calendar.json';
$.getJSON（url、函数（数据）{
var events=data.resultsPage.results.event；
console.log（事件）；
forEach（函数（项、索引、数组）{
var event_month=moment（数组[index].start.date）.format（'MMM'）；
var event_day=时刻（数组[index].start.date）。格式（'D'）；
var事件日期=“”+事件月+“”+事件日+“”；
var event_performer=array[index]。性能[0]。artist.displayName；
var event_vention=array[index].venture.displayName；
var event_city=array[index].location.city；
var event_link=array[index].uri；
var事件详细信息=“”+事件城市+“”+事件地点+“”；
如果（事件月！=“无效日期”&&event月日！=“无效日期”）{
$（'.tour grid'）。追加（''+事件\日期+事件\详细信息+''）；
}
});
});

问题出在哪里？我需要排除任何“状态”标记为“已取消”的事件。 目前，Javascript可以拉入任何事件，无论其状态如何

---

是否有一种方法可以修改内容，以确保HTML只输出状态为“ok”的事件，并排除任何标记为“cancelled”的事件？

这可能会有帮助：

$.getJSON(url, function (data) {
    var events = data.resultsPage.results.event;
    console.log(events);

    // Initially filter out all the events with status "cancelled" so they won't be rendered
    const filteredEvents = events.filter(event => event.status !== "cancelled");
    // Running on the filtered events
    filteredEvents.forEach(function (item, index, array) {
    ...
    });
  });

---

也许这会有帮助：

$.getJSON(url, function (data) {
    var events = data.resultsPage.results.event;
    console.log(events);

    // Initially filter out all the events with status "cancelled" so they won't be rendered
    const filteredEvents = events.filter(event => event.status !== "cancelled");
    // Running on the filtered events
    filteredEvents.forEach(function (item, index, array) {
    ...
    });
  });

---

查看在javascript中过滤对象/列表。查看在javascript中过滤对象/列表。