JSFiddle - React, Tailwind, and code Playground
HTML
<button id="test">See the Tab</button>
<div class="varianceData"></div>
JavaScript
$('#test').click(function () {
// Here are the two dates to compare
var date1 = '29-10-2015';
var date2 = '29-12-2015';
var Targetvalue = parseFloat("1000000");
var dealjson = '[{"dealdate":"25-11-2015","cost":200000}]';
// First we split the values to arrays date1[0] is the year, [1] the month and [2] the day
date1 = date1.split('-');
date2 = date2.split('-');
// Now we convert the array to a Date object, which has several helpful methods
date1 = new Date(date1[2], date1[1], date1[0]);
date2 = new Date(date2[2], date2[1], date2[0]);
var deals = JSON.parse(dealjson);
var achieved = 0;
var str = '<table> <tr> <th>Week</th> <th>Target</th> <th>Achieved</th> </tr>';
var i = 0;
while(date1 <= date2) {
var next_week = new Date(date1);
next_week.setDate(date1.getDate() + 7);
achieved = 0;
deals.forEach(function(deal){
var dealDate = deal.dealdate;
dealDate = dealDate.split('-');
dealDate = new Date(dealDate[2], dealDate[1], dealDate[0]);
if (dealDate >= date1 && dealDate <= next_week) {
achieved = achieved + deal.cost;
}
});
i = i + 1;
date1 = next_week;
str = str + "<tr><th>Week" + i + "</th><td>" + Targetvalue + "</td><td> " + achieved + "</td></tr>";
}
str = str + "</table>";
$('.varianceData').html(str);
});