简体   繁体   English

过滤从当月第一天到当前日期的日期

[英]Filter dates from the first day of the month to the current date

I have a chart that extracts data from an JSON API.我有一张从 JSON API 中提取数据的图表。 I want to display date only from the beginning of the month to the current date.我只想显示从月初到当前日期的日期。

Start date is the first day of that month and end date is the current date开始日期是该月的第一天,结束日期是当前日期

I tried the following, but it is returning undefined.我尝试了以下方法,但它返回未定义。 I m requesting for assistance with this code.我正在请求有关此代码的帮助。

Thank you.谢谢你。

Below is my code.下面是我的代码。

        let dates = [];
let confirmed = [];
let recovered = [];
let deaths = [];

var today = new Date();
var TodayDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

var startDate = '01-04-2020'; //YYYY-MM-DD
var endDate = TodayDate; //YYYY-MM-DD

var getDateArray = function(start, end) {
    var arr = new Array();
    var dt = new Date(start);
    while (dt <= end) {
        arr.push(new Date(dt));
        dt.setDate(dt.getDate() + 1);
    }
    return arr;
}

var dateArr = getDateArray(startDate, endDate);


fetch("https://pomber.github.io/covid19/timeseries.json")
  .then(response => response.json())
  .then(data=> {
    data["South Africa"].forEach(o => {
      dates.filter(function() {
        o.date==dateArr;
      }).push(o.date);
      confirmed.push(o.confirmed);
      recovered.push(o.recovered);
      deaths.push(o.deaths);
    })
    new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: {
        labels: dates,
        datasets: [{
            label: 'Confirmed',
            borderColor: 'orange',
            backgroundColor: 'orange',
            fill: 'false',
            data: confirmed
          },
          {
            label: 'Recovered',
            borderColor: 'green',
            backgroundColor: 'green',
            fill: 'false',
            data: recovered
          },
          {
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'red',
            fill: 'false',
            data: deaths
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: 'COVID-19 / Eswatini Time Series'
        }
      }
    });
  });
    </script>

This gives u list data from api between your expected dates这为您提供了您预期日期之间来自 api 的列表数据

 var today = new Date(); var firstDay = new Date(today.getFullYear(), today.getMonth(), 1); var getDateArray = function(start, end) { var arr = new Array(); var dt = start; while (dt <= end) { arr.push(dt.getFullYear()+'-'+(dt.getMonth()+1)+'-'+dt.getDate()); dt.setDate(dt.getDate() + 1); } return arr; } var dateArr = getDateArray(firstDay, today); getDatas("South Africa"); function getDatas(counryName){ fetch("https://pomber.github.io/covid19/timeseries.json").then(response => response.json()).then(data=> { var categories=[]; var confirms=[]; var recovers=[]; var result = data[counryName].filter(function(item) { return dateArr.includes(item.date); }) result.forEach(item=>{ categories.push(item.date); confirms.push(item.confirmed); recovers.push(item.recovered); }) var options = { type: 'line', data: { labels: categories, datasets: [ { label: '# of Confirmed', data: confirms, borderWidth: 1 }, { label: '# of Recovered', data:recovers, borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { reverse: false } }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); console.log(result); }); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body>

The problem is that the end date is not formatted as date and the loop (while) is not doing it correctly.问题是结束日期没有格式化为日期并且循环(while)没有正确执行。 The solution is new Date(end)解决方案是new Date(end)

var getDateArray = function(start, end) {
var arr = new Array();
var dt = new Date(start);
while (dt <= new Date(end)) {
    arr.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
}
return arr;

} }

and the complete code would be完整的代码是

 let dates = []; let confirmed = []; let recovered = []; let deaths = []; var today = new Date(); var TodayDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); var startDate = '01-04-2020'; //YYYY-MM-DD var endDate = TodayDate; //YYYY-MM-DD var getDateArray = function(start, end) { var arr = new Array(); var dt = new Date(start); while (dt <= new Date(end)) { arr.push(new Date(dt)); dt.setDate(dt.getDate() + 1); } return arr; } var dateArr = getDateArray(startDate, endDate); fetch("https://pomber.github.io/covid19/timeseries.json").then(response => response.json()).then(data=> { data["South Africa"].forEach(o => { dates.filter(function() { o.date==dateArr; }).push(o.date); confirmed.push(o.confirmed); recovered.push(o.recovered); deaths.push(o.deaths); }) new Chart(document.getElementById('myChart'), { type: 'line', data: { labels: dates, datasets: [{ label: 'Confirmed', borderColor: 'orange', backgroundColor: 'orange', fill: 'false', data: confirmed }, { label: 'Recovered', borderColor: 'green', backgroundColor: 'green', fill: 'false', data: recovered }, { label: 'Deaths', borderColor: 'red', backgroundColor: 'red', fill: 'false', data: deaths } ] }, options: { responsive: true, maintainAspectRatio: false, title: { display: true, text: 'COVID-19 / Eswatini Time Series' } } }); }); console.log(dateArr)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM