时间戳

首页 > 解决方案 > JSON to HTML 排除某些值

javascript - JSON to HTML 排除某些值

问题描述

我正在通过列出事件的 API URL 提取一些 JSON。JSON看起来像这样......

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

将其转换为 HTML 的简单脚本是这样的......

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>');
    }
  });
});

问题？我需要排除任何“状态”标记为“已取消”的事件。目前，无论其状态如何，Javascript 都会触发任何事件。

有没有办法可以修改内容以确保 HTML 仅输出状态为“正常”的事件并排除任何标记为“已取消”的事件？

标签： javascriptjsonapi

解决方案

也许这会有所帮助：


$.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) {
    ...
    });
  });

推荐阅读