Jqueryの地図と瞬間を使ったシンプルなタイムラインを作るjs

Question

私は把握できない小さな問題を除いて、タイムラインが働いています。私のアイテムを日付でグループ化しますが、エントリがない場合は日付をスキップします。私はそれらの日付を表示したいが、「表示する項目はありません」というメッセージを表示したい。例えば

： 私は2016-05-02から2016-05-04

の日付範囲を選択した場合は、私が取得したいと思います：

Monday 2 May 2016 
1 Test1 
2 Test2 
Tuesday 3 May 2016 
No items to display... 
Wednesday 4 May 2016 
3 Test3 
4 Test4 

HERESに私のコードのラフ例： https://jsfiddle.net/vLdn68ko/15/

var items_by_date = {}; // declare an object that will have date indexes 
$.ajax({url:"/SomeUrlBeginninWithSlash/daterange/?$filter=(start_date ge '2016-05-02') and (end_date lt '2016-05-04')", 
    dataType: 'json', 
    cache: false, 
    success: function (data) { 

     data.d.results.map(function(item){ 
     var item_date = moment(item.Date).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); 
     }) 

     console.log(items_by_date); 
     // now you can render how ever you need to 
     drawTable(items_by_date); 
    } 
}); 

function drawTable(data){ 
    $('#dataTable').html(''); 
    for(var d in data){ // d will be the date index 
    $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>'); 

    data[d].map(function(item){ 
     $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>'); 
    }) 
    } 
} 

を

本当にありがとうございます。

Answer 1

基本的には、範囲から最低限の日付を取得し、最大値を取得し、エントリのない日数でデータを入力する必要があります。そのビット醜いあなたは日付文字列の代わりに、日付を保つため、変換する必要がありますが、それは正常に動作しますので：

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 item_date = moment(item.Date).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); 
     }) 

     fillEmpty(items_by_date); 
     // now you can render how ever you need to 
     drawTable(items_by_date); 
     } 
    }); 

    function fillEmpty(items_by_date){ 
    var dates = Object.keys(items_by_date).map(function(d){return new Date(d)}) 
    var minDate = new Date(Math.min.apply(null,dates)) 
    var maxDate = new Date(Math.max.apply(null,dates)) 
    while(minDate < maxDate){ 
     minDate.setDate(minDate.getDate()+1) 
     var key = moment(minDate).format('dddd D MMMM YYYY'); 
     items_by_date[key] = items_by_date[key] || [{ID:"",Description: "No items to display..."}] 
    } 
    } 

    function drawTable(data){ 
    $('#dataTable').html(''); 
    Object.keys(data).sort(function(a,b){return new Date(a)-new Date(b)}).forEach(function(d){ // you actually need to show them sorted by day 
     $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>'); 
     data[d].map(function(item){ 
      $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>'); 
     }) 
     }) 
    } 

全フィドル：https://jsfiddle.net/vLdn68ko/18/