javascript - Moment/Jquery - 简单时间线的愚蠢问题

Question

我从这个社区得到了很多帮助，让我的时间线报告正常工作。设置的方式是通过检查 ajax 返回来获取日期范围。然后它会按星期几对我的所有条目进行分组。如果该日期范围内没有特定的条目，那么它将简单地返回“今天没有条目。”

到目前为止一切正常，您可以看到下面的示例: https://jsfiddle.net/j3yg2j7j/7/

但是我注意到，如果日期范围中的最后一天为空，它会忽略它。我需要它返回“今天没有条目”。即使最后一天是空的。

这是该问题的一个示例。 https://jsfiddle.net/j3yg2j7j/6/

更新: 又发现一个奇怪的问题。当我给出 2016-05-02 到 2016-05-05 的范围时。我开始收到重复的项目。

https://jsfiddle.net/j3yg2j7j/5/

这是 Ajax 请求:

responseText: {
    d: {
        results: [{
            ID: "1",
            Description: "Test1",
            Date: "2016-05-02 09:45"
        }, {
            ID: "2",
            Description: "Test2",
            Date: "2016-05-02 10:45"
        }, {
            ID: "3",
            Description: "Test3",
            Date: "2016-05-03 11:45"
        }, {
            ID: "4",
            Description: "Test4",
            Date: "2016-05-03 11:45",
        }]
    }
}

这是 JavaScript:

      var items_by_date  = {}; // declare an object that will have date indexes
      $.ajax({url:"/SomeUrlBeginninWithSlash",
          dataType: 'json',
          cache: false,
          success: function (data) {
                    console.log("SUCCESS",data);    
                    drawTable(data.d.results);
          }
      });

 var drawTable = function(data) {
  // First sort the entries by date:
  data = data.sort(function(a, b) {
    return (moment(a.Date) - moment(b.Date));
  });

  // Find the date range to work with by looking at each end of the array:
  var firstDate = moment("2016-05-02");
  var lastDate = moment("2016-05-04");

  // loop through each day in that range, keeping track of a starting point i
  // so we don't have to keep checking already-passed events.
  var i = 0, // pointer to the first entry to check on the next date
    ret = ""; 
  for (var thisDate = firstDate; thisDate <= lastDate; thisDate.add(1, 'days')) {
    ret += '<tr><th>' + thisDate.format("dddd, MMMM D") + "</th></tr>";

    // check to see if the next entry is already beyond thisDate:
    if (moment(data[i].Date) > thisDate.endOf('day')) {
      ret += "<tr><td>No entries today.</td></tr>";
    } else {
      // starting at entry i, display all entries before the end of thisDate:
      for (var j = i; j < data.length; j++) {
        if (moment(data[j].Date) < thisDate.endOf('day')) {
          // the next one belongs on thisDate, so display it:
          ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
        } else {
          // next one is not for thisDate, so we can go on to the next day.
          i = j; // It'll start here, so we don't waste time looping over past events
          break; // (out of the inner loop)
        }
      }
    }
  }
  $('#x').html(ret);
}

我知道我忽略了一些简单的事情，但不能完全指出它。

Answer 1

对于缺少的最后一天，您将 lastDate 设置为 5 月 4 日开始 - 它需要在该天结束时:

var lastDate = moment("2016-05-04").endOf('day');

重复的事件是因为我为你的上一个问题编写的代码假设条目列表中的最后一个日期是你想要显示的最后一个日期，所以它不需要处理你的情况用完条目后继续循环日期。这可以通过处理这种情况来解决:

if (i === data.length) {
   // we've run out of entries; don't try to check past the end of the data array:
   ret += "<tr><td>No entries today.</td></tr>";   
} else if (moment(data[i].Date) > thisDate.endOf('day')) {
  // The next entry is later than this day.
  ret += "<tr><td>No entries today.</td></tr>";
} else {
  // starting at entry i, display all entries before the end of thisDate:
  for (var j = i; j < data.length; j++) {
    if (moment(data[j].Date) < thisDate.endOf('day')) {
      // the next one belongs on thisDate, so display it:
      ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
    } else {
      // next one is not for thisDate, so we can go on to the next day.
      i = j; // It'll start here, so we don't waste time looping over past events
      break; // (out of the inner loop)
    }
  }
  // Did we run out of entries?  If so, need to update i here to prevent repeated display
  if (j === data.length) {
    i = j;
  }
}

https://jsfiddle.net/tt35rnoo/

但是...

考虑到您已多次询问此问题的不同版本，因此最好保持简单。尝试这个效率较低但复杂程度要低得多的版本，它不会尝试跳过每个循环中已显示的事件:

  // loop through each day in that range
  var ret = ""; 
  for (var thisDate = firstDate; thisDate <= lastDate; thisDate.add(1, 'days')) {
    ret += '<tr><th>' + thisDate.format("dddd, MMMM D") + "</th></tr>";
    var showedAnEventToday=false;

    for (var j = 0; j < data.length; j++) {
        if (
            moment(data[j].Date) > thisDate.startOf('day') && 
            moment(data[j].Date) < thisDate.endOf('day')
        ) {

          showedAnEventToday = true;
          ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
        } 
    }
    if (!showedAnEventToday) {
        ret += '<tr><td>No events today.</td></tr>';
    }
  }
  $('#x').html(ret);

https://jsfiddle.net/ejaca00t/