javascript - 使用 moment JS 制作简单时间线的问题

Question

我正在尝试创建一个简单的报告，其中我从 ajax 请求获取条目，并且我想简单地按星期几对我的条目进行分组。例如，我想得到一些简单的东西:

----------------------------------
Monday - May 2nd - 2016
-----------------------------------
Entry 1 
Description
Date: 2016-05-02 09:45
-----------------------------------
Entry 2 
Description
Date: 2016-05-02 10:55
-----------------------------------

-----------------------------------
Tuesday - May 3rd - 2016
-----------------------------------
No entries to display ...
-----------------------------------


-----------------------------------
Wednesday - May 4th - 2016
-----------------------------------
Entry 3 
Description
Date: 2016-05-04 09:45
-----------------------------------
Entry 4 
Description
Date: 2016-05-04 10:55
----------------------------------

我目前陷入代码的一部分，即如果当天没有条目，则返回:

$('#dataTable').append('<tr><td colspan="2">No entries to display...</td></tr>');   

有没有一种方法可以简单地说如果星期几条目长度等于 0 则返回上述内容？

这就是我目前所拥有的，目前有点困惑，因为我尝试了很多事情。

https://jsfiddle.net/vLdn68ko/20/

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

        var minDate = moment("2016-05-02");
        var maxDate = moment("2016-05-04");
        var duration = moment(minDate).diff(moment(maxDate), 'days');

        while(duration > 0){
          item_date = moment(minDate).format('dddd D MMMM YYYY');
          // if the date index does not exist we need to declare it
          if(!items_by_date[item_date]) items_by_date[item_date] = [item];
          // else we can just push the item on that array
          else items_by_date[item_date].push(item);    
          var minDate = moment(minDate).subtract(1, 'day');
          var duration_test = duration_test-1;
        }
       console.log(items_by_date); 

       })
        drawTable(items_by_date);
      }
  });

  function drawTable(data){
    $('#dataTable').html('');
    Object.keys(data).sort(function(a,b){return new Date(a)-new Date(b)}).forEach(function(d){
        $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>');
        data[d].map(function(item){
              if(item.ID == ""){
                $('#dataTable').append('<tr><td colspan="2">No entries to display...</td></tr>');
            }else{
                $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>');                
            }
        })
      })
  }

这是我的 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-04 11:45"
        }, {
            ID: "4",
            Description: "Test4",
            Date: "2016-05-04 11:45",
        }]
    }
}     

有人知道我缺少什么吗？

Answer 1

我得意忘形并重写了整个事情。对此感到抱歉。

这不需要预先计算每天的条目数组。相反，策略是循环几天，跟踪哪些条目已经显示，作为效率捷径:

• 对于范围内的每个日期，
  • 如果下一个未显示的条目晚于此日期，则显示“今天没有条目”并转到下一个日期。
  • 否则，从最后一个已显示的条目之后开始，显示当前日期结束之前的所有条目。

(对于任何合理数量的条目，普通的老式无聊嵌套循环可能已经足够了，但过早的优化更有趣。)

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(data[0].Date);
  var lastDate = moment(data[data.length - 1].Date).endOf('day');

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

// hardcoding test data instead of using ajax for demo, with some 
// repeated and some out-of-order events:

drawTable(
  [{
    ID: "1",
    Description: "Test 1",
    Date: "2016-05-06 09:45"
  }, {
    ID: "2",
    Description: "Test 2",
    Date: "2016-05-02 10:45"
  }, {
    ID: "3",
    Description: "Test 3",
    Date: "2016-05-04 11:45"
  }, {
    ID: "4",
    Description: "Test 4",
    Date: "2016-05-04 11:45",
  }, {
    ID: "5",
    Description: "Test 5",
    Date: "2016-05-04 12:45",
  }]
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>

<table id="x"></table>