问题与时刻做一个简单的时间表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", 
     }] 
    } 
}  

有没有人有任何想法，缺什么IM？

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>