I want to convert this json into html table with sorted date wise. Basically my JSON data comes through looking like this:
Here I want to recurrenceList dates
var frequencyList= [
{
"project": "abc",
"recurrenceList": [
"2021-09-16",
"2023-09-16",
"2025-09-16"
]
},
{
"project": "xyz",
"recurrenceList": [
"2021-08-23",
"2025-08-23"
]
},
{
"project": "mno",
"recurrenceList": [
"2021-09-11",
"2022-05-11",
"2023-01-11",
"2023-09-11",
"2024-05-11",
"2025-01-11",
"2025-09-11"
]
}
]
I am getting output like this
expected output in html table with two columns given below (based on above JSON)
project name reminder date
xyz 2021-08-23
mno 2021-09-11
abc 2021-09-16
mno 2022-05-11
etc…
Below code for Ajax to get the JSON DATA 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;
}
$('#find_recurrence').click(function(event) {
$('.tableinvoicelist_all').find('tbody').remove();
var getID_comp = $('#getID_comp').val();
var fromdate_recu_viewedit = $('#fromdate_recu_view').val(); //2025-01-01
var fromdate_recu_view = fromdate_recu_viewedit.split("-").reverse().join("-");
var todate_recu_viewedit = $('#todate_recu_view').val(); //2026-01-30
var todate_recu_view = todate_recu_viewedit.split("-").reverse().join("-");
//hard-code data instead of AJAX, for this demo:
$.ajax({
url: base_url + "index.php/welcome/list_all_projects_reminder/",
type: "POST",
data: {
"company_id": getID_comp
},
success: function(data) {
var new_datajson = JSON.parse(data);
let new_data = new_datajson;
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);
$.each(frequencyList, function(index, jsonObject){
if(Object.keys(jsonObject).length > 0){
var tableRow = '<tr>';
$.each(Object.keys(jsonObject), function(i, key){
tableRow += '<td>' + jsonObject[key] + '</td>';
});
tableRow += "</tr>";
$("#tablereminder").last().append(tableRow);
}
});
}
})
});
How to change the list in one list instead of three list (recurrenceList)?
Sort with date wise
2
Answers
You can convert the dates to timestamps and sort according to those timestamps, like:
Here is an alternative version of the getPaymentPlan function which will output the data in a format which may be easier to sort, and also to output later according to your desired HTML format:
You can then sort it using a comparison function similar to the examples available in earlier questions such as this one:
Once you’ve done that you can just loop through the list to generate the HTML table:
Putting it all together in a demo, you can get the output you were looking for:
(You may need to view the demo in full page mode to see the table as well as the debugging output from the console.)