如何使用 jquery 设置提醒？

Question

在数据库中，有 project_details 表。我正在从数据库中获取数据，结果如下所示；

重复开始日期在数据库表中，但我没有在数据库中保存结束日期。结束日期取决于用户从字段中的选择（从日期到日期）

{
   "projectremindshow":[
      {
         "project_ID":"8",
         "project_title":"abc",
         "period_type":"Yearly",
         "recurrence_date":"2021-10-28",
         "reminder_set_days":"12",
         "recur_every":"2",
         "start_date":"2021-09-28"
      },
      {
         "project_ID":"10",
         "project_title":"xyz",
         "period_type":"Yearly",
         "recurrence_date":"2021-10-05",
         "reminder_set_days":"13",
         "recur_every":"4",
         "start_date":"2021-09-05"
      },
      {
         "project_ID":"11",
         "project_title":"mno",
         "period_type":"Monthly",
         "recurrence_date":"2021-10-01",
         "reminder_set_days":"10",
         "recur_every":"8",
         "start_date":"2021-09-21"
      }
   ]
}


const inputList = [
  {

       date: new Date("2021-01-01"), 
       date2: new Date(todate_recu_view), 
       daysBefore: reminder_set_days, 
       period: period_type, 
       skip: recur_every
  }]

const frequencyList = inputList.map((el, index) => {
  return getPaymentPlan(el)
})

如何将每个 for 循环值传递给 inputList？

从这些项目列表中，我想找出一个月或一周或一年的提醒日期，例如通过用户选择从和到日期选项来选择日期期间。

基于上面的 JSON，我想显示一个包含所有提醒日期的 HTML 表格。

我有两个字段从和到日期和搜索按钮。单击搜索按钮结果表将显示。

期望输出 example1 是 如果用户选择 from-date= 2021-01-01 和 to_date=2026-01-30 并显示如下结果 Html 表格看起来有两列，如下所示：

project Title reminderdate
abc           2021-09-28 /*show from start_date value from json and recur every 2 years (count upto to_date=2026-01-30) */
abc           2023-09-28 /*recur every 2 years*/
abc           2025-09-28 /*recur every 2 years*/
xyz           2021-09-05 /*recur every 4 years*/
xyz           2025-09-05 /*recur every 4 years*/
mno           2021-09-21 /*recur every 8 months*/
mno           2022-05-21 /*recur every 8 months*/
mno           2023-01-21 /*recur every 8 months*/
mno           2023-09-21 /*recur every 8 months*/
mno           2024-05-21 /*recur every 8 months*/
mno           2025-01-21 /*recur every 8 months*/ 
mno           2025-09-21 /*recur every 8 months becoz user select to_date=2026-01-30*/

期望输出 example2 是

如果假设用户选择 from-date= 2025-01-01 和 to_date=2026-01-30 并显示如下结果

project Title reminderdate
abc           2025-09-28 /*recur every 2 years*/
xyz           2025-09-05 /*recur every 4 years*/
mno           2025-01-21 /*recur every 8 months*/ 
mno           2025-09-21 /*recur every 8 months*/

谁能帮我做这个？

我试过的代码：

$('#find_recurrence').click(function(event) {
  var getID_comp = $('#getID_comp').val();
  var fromdate_recu_view = $('#fromdate_recu_view').val(); //2025-01-01
  var todate_recu_view = $('#todate_recu_view').val(); //2026-01-30
  
  $.ajax({
    url: base_url + "index.php/welcome/list_all_projects_reminder/",
    type: "POST",
    data: {
      "company_id": getID_comp
    },
    success: function(data) {
      var new_data = JSON.parse(data);
      console.log(new_data) //above mentioned JSON result


      for (var i = 0; i < new_data.projectremindshow.length; i++) {
        var sl = i + 1;

        var project_ID = new_data.projectremindshow[i].project_ID;
        var project_title = new_data.projectremindshow[i].project_title;
        var recur_every = new_data.projectremindshow[i].recur_every;
        var period_type = new_data.projectremindshow[i].period_type;
        var reminder_set_days = new_data.projectremindshow[i].reminder_set_days;


        const getPaymentPlan = ({
          date,
          date2,
          daysBefore,
          period,
          skip
        }) => {
          const originalDate = new Date(date.getTime()); // original copy before mutating
          const startDate = new Date(date.setDate(date.getDate() - daysBefore))

          // date has been mutated. giving it previous value
          date = new Date(originalDate.getTime())

          const recurObj = {
            "recurrenceList": []
          }

          while (startDate.getTime() <= date2.getTime()) {
            recurObj.recurrenceList.push(startDate.toISOString().split('T')[0])

            switch (period) {
              case 'monthly':
                startDate.setMonth(startDate.getMonth() + skip)
                break;
              case 'yearly':
                startDate.setFullYear(startDate.getFullYear() + skip)
                break;
              default:
                recurObj.recurrenceList.push("wrong period type is given")
                break;
            }
          }

          return recurObj
        }

        const inputList = [{

          date: new Date("2021-01-01"),
          date2: new Date(todate_recu_view),
          daysBefore: reminder_set_days,
          period: period_type,
          skip: recur_every
        }]

        const frequencyList = inputList.map((el, index) => {
          return getPaymentPlan(el)
        })
        console.log(frequencyList)

      }
    }
  });
});

Answer 1

虽然您还没有完成将 AJAX 的结果分配到数组中的点（因为您在 for 循环之外有 inputList，其中未定义或循环值），最后代码中还有很多其他的小问题，尤其是在 getPaymentPlan 函数内部，因此无法在此处将它们全部列出。相反，我只是提供一个工作版本供您学习和学习。

此外，您在问题中所述的预期结果也不正确 - 您已要求它显示提醒日期，但您列出的是重复日期。所有提醒日期都提前几天（由reminder_set_days 属性控制）。

我的演示产生的结果显示的是实际的提醒日期：

$('#find_recurrence').click(function(event) {
  var fromdate_recu_view = $('#fromdate_recu_view').val(); //2025-01-01
  var todate_recu_view = $('#todate_recu_view').val(); //2026-01-30

  //hard-code data instead of AJAX, for this demo:
  let new_data = {
    "projectremindshow": [{
        "project_ID": "8",
        "project_title": "abc",
        "period_type": "Yearly",
        "recurrence_date": "2021-10-28",
        "reminder_set_days": "12",
        "recur_every": "2",
        "start_date": "2021-09-28"
      },
      {
        "project_ID": "10",
        "project_title": "xyz",
        "period_type": "Yearly",
        "recurrence_date": "2021-10-05",
        "reminder_set_days": "13",
        "recur_every": "4",
        "start_date": "2021-09-05"
      },
      {
        "project_ID": "11",
        "project_title": "mno",
        "period_type": "Monthly",
        "recurrence_date": "2021-10-01",
        "reminder_set_days": "10",
        "recur_every": "8",
        "start_date": "2021-09-21"
      }
    ]
  };

  let inputList = [];

  for (var i = 0; i < new_data.projectremindshow.length; i++) {
    var proj = new_data.projectremindshow[i];

    //add a new entry to inputList for each entry returned from the AJAX call
    inputList.push({
      dateFrom: new Date(fromdate_recu_view),
      dateTo: new Date(todate_recu_view),
      daysBefore: proj.reminder_set_days,
      recurrenceDate: new Date(proj.start_date),
      period: proj.period_type,
      skip: proj.recur_every,
      title: proj.project_title
    });
  }

  const frequencyList = inputList.map((el, index) => {
    return getPaymentPlan(el)
  });
  console.log(frequencyList);
});

/* the getPaymentPlan function is standalone, it should not be within a loop or within any other callback functions! */
const getPaymentPlan = ({
  dateFrom,
  dateTo,
  recurrenceDate,
  daysBefore,
  period,
  skip,
  title
}) => {
  //start from either the recurrence start date, or the start date in the form - whichever is later
  let startDate = (recurrenceDate.getTime() > dateFrom.getTime() ? recurrenceDate : dateFrom);
  //reminders go out several days before the actual recurrence start date
  startDate = startDate.subtractDays(daysBefore);

  let recurObj = {
    "project": title,
    "recurrenceList": []
  }

  while (startDate.getTime() <= dateTo.getTime()) {
    recurObj.recurrenceList.push(startDate.toISOString().split('T')[0]);

    switch (period) {
      case 'Monthly':
        startDate = startDate.addMonths(parseInt(skip));
        break;
      case 'Yearly':
        startDate.setFullYear(startDate.getFullYear() + parseInt(skip));
        break;
      default:
        recurObj.recurrenceList.push("wrong period type is given")
        break;
    }
  }

  return recurObj;
}

/* below are some functions to correctly add / subtract days and months from a Date, accounting for leap years, differing month lengths, etc */
Date.prototype.addDays = function(days) {
  var date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
}

Date.prototype.subtractDays = function(days) {
  var date = new Date(this.valueOf());
  date.setDate(date.getDate() - days);
  return date;
}

Date.prototype.addMonths = function(months) {
  var date = new Date(this.valueOf());
  var d = date.getDate();
  date.setMonth(date.getMonth() + months);
  if (date.getDate() != d) {
    date.setDate(0);
  }
  return date;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
From date: <input type="date" id="fromdate_recu_view" /><br/> To date: <input type="date" id="todate_recu_view"><br/>
<button id="find_recurrence">Find Recurrence</button>

这里是 getPaymentPlan 函数的替代版本，它将以一种更易于排序的格式输出数据，并且稍后根据您所需的 HTML 格式输出：

const getPaymentPlan = ({
  dateFrom,
  dateTo,
  recurrenceDate,
  daysBefore,
  period,
  skip,
  title
}) => {
  //start from either the recurrence start date, or the start date in the form - whichever is later
  let startDate = (recurrenceDate.getTime() > dateFrom.getTime() ? recurrenceDate : dateFrom);
  //reminders go out several days before the actual recurrence start date
  startDate = startDate.subtractDays(daysBefore);

  let recurrenceList = [];

  while (startDate.getTime() <= dateTo.getTime()) {
    recurrenceList.push({ "project": title, "reminderDate": startDate.toISOString().split('T')[0] });

    switch (period) {
      case 'Monthly':
        startDate = startDate.addMonths(parseInt(skip));
        break;
      case 'Yearly':
        startDate.setFullYear(startDate.getFullYear() + parseInt(skip));
        break;
      default:
        recurrenceList.push({ "project": "wrong period type is given", "reminderDate": null })
        break;
    }
  }

  return recurrenceList;
}