I have some JavaScript which parses over a JSON object and inserts a Date separator between the records based on the date value. Similar to how Windows File Explorer will show date dividers like Last week, Earlier this month, last Month, and more.
My current real project simply itterates the JSON object and injects the data from each item into the page HTML.
My test project on this JSFiddle is where I have it comparing the Date value in the JSON objects and creating the different Date Diver Groups.
The test project http://jsfiddle.net/0vsz8jk4/19/ simply prints the date diver groups and its child items under each one with a call to:
out.innerHTML = JSON.stringify(groups, null, "\t")
This looks like this...
I need help with instead passing each item including the Date divider into another JavaScript function which will take the JSON data and create some HTML with it and inject it into the page DOM.
Something like this
taskActivitiesContainer.prepend(taskActivityRowHtmlTemplate).fadeIn(2000);
Where taskActivityRowHtmlTemplate is each JOSN row/record/item. It will be passed into a function which adds some HTML formatting with the items in that row/record and then inject the row into the DOM.
I have this little Date utility code to help with the date comparisons...
// Date library for DateTime comparisons and checking if a date is in-between a range of 2 dates!
var dates = {
convert: function(d) {
// Converts the date in d to a date-object. The input can be:
// a date object: returned without modification
// an array : Interpreted as [year,month,day]. NOTE: month is 0-11.
// a number : Interpreted as number of milliseconds
// since 1 Jan 1970 (a timestamp)
// a string : Any format supported by the javascript engine, like
// "YYYY/MM/DD", "MM/DD/YYYY", "Jan 31 2009" etc.
// an object : Interpreted as an object with year, month and date
// attributes. **NOTE** month is 0-11.
return (
d.constructor === Date ? d :
d.constructor === Array ? new Date(d[0], d[1], d[2]) :
d.constructor === Number ? new Date(d) :
d.constructor === String ? new Date(d) :
typeof d === "object" ? new Date(d.year, d.month, d.date) :
NaN
);
},
compare: function(a, b) {
// Compare two dates (could be of any type supported by the convert
// function above) and returns:
// -1 : if a < b
// 0 : if a = b
// 1 : if a > b
// NaN : if a or b is an illegal date
// NOTE: The code inside isFinite does an assignment (=).
return (
isFinite(a = this.convert(a).valueOf()) &&
isFinite(b = this.convert(b).valueOf()) ?
(a > b) - (a < b) :
NaN
);
},
inRange: function(d, start, end) {
// Checks if date in d is between dates in start and end.
// Returns a boolean or NaN:
// true : if d is between start and end (inclusive)
// false : if d is before start or after end
// NaN : if one or more of the dates is illegal.
// NOTE: The code inside isFinite does an assignment (=).
return (
isFinite(d = this.convert(d).valueOf()) &&
isFinite(start = this.convert(start).valueOf()) &&
isFinite(end = this.convert(end).valueOf()) ?
start <= d && d <= end :
NaN
);
},
// Subtract number of months from current month
// dates.subtractMonth(1)
subtractMonth: function(numberOfMonths) {
//var d = this;
var d = new Date();
d.setMonth(d.getMonth() - numberOfMonths);
d.setDate(1);
return d;
}
};
This is my test demo code to parse the JSON object and determine where the Date dividers should be placed in between the JSON items...
// JSON records which the date labels will be injected in-between in the HTML that is generated.
var task_activities = [{"id":1,"name":"record 1","date_time":"7\/5\/2015"},{"id":2,"name":"record 2","date_time":"7\/9\/2015"},{"id":3,"name":"record 3","date_time":"7\/13\/2015"},{"id":4,"name":"record 4","date_time":"7\/17\/2015"},{"id":5,"name":"record 5","date_time":"7\/21\/2015"},{"id":6,"name":"record 6","date_time":"7\/25\/2015"},{"id":7,"name":"record 7","date_time":"7\/29\/2015"},{"id":8,"name":"record 8","date_time":"8\/1\/2015"},{"id":9,"name":"record 9","date_time":"8\/5\/2015"},{"id":10,"name":"record 10","date_time":"8\/9\/2015"},{"id":11,"name":"record 11","date_time":"8\/13\/2015"},{"id":12,"name":"record 12","date_time":"8\/17\/2015"},{"id":13,"name":"record 13","date_time":"8\/21\/2015"},{"id":14,"name":"record 14","date_time":"8\/25\/2015"},{"id":15,"name":"record 15","date_time":"8\/29\/2015"},{"id":16,"name":"record 16","date_time":"9\/1\/2015"},{"id":17,"name":"record 17","date_time":"9\/5\/2015"},{"id":18,"name":"record 18","date_time":"9\/9\/2015"},{"id":19,"name":"record 19","date_time":"9\/10\/2015"},{"id":20,"name":"record 20","date_time":"9\/17\/2015"}];
var dateLabels = [];
var groups = {
'A while Ago': [],
'Last Month': [],
'Earliar in the Month': [],
'Last Week': [],
'Earlier this Week': [],
'Yesterday': [],
'Today': [],
'other': []
}
dateRangeLabels = {
'Today': {
'start': new Date('2015-09-12T00:00:00'),
'end': new Date('2015-09-12T00:00:00'),
'dateFunc': 'inRange'
},
'Yesterday': {
'start': new Date('2015-09-11T00:00:00'),
'end': new Date('2015-09-11T00:00:00'),
'dateFunc': 'inRange'
},
'Earlier this Week': {
'start': new Date('2015-09-06T00:00:00'),
'end': new Date('2015-09-10T00:00:00'),
'dateFunc': 'inRange'
},
'Last Week': {
'start': new Date('2015-08-30T00:00:00'),
'end': new Date('2015-09-05T00:00:00'),
'dateFunc': 'inRange'
},
'A while Ago': {
'start': new Date('2010-08-30T00:00:00'),
'end': new Date('2015-07-31T00:00:00'),
'dateFunc': 'inRange'
},
'Last Month': {
'start': new Date('2015-08-01T00:00:00'),
'end': new Date('2015-08-31T00:00:00'),
'dateFunc': 'inRange'
},
'Earliar in the Month': {
'start': new Date('2015-08-30T00:00:00'),
'end': new Date('2015-09-05T00:00:00'),
'dateFunc': 'inRange'
},
'other': {
'start': new Date('2015-09-13T00:00:00'),
'end': new Date('2999-12-31T00:00:00'),
'dateFunc': 'inRange'
}
}
// Loop over each Task Activity record and generate HTML
$.each(task_activities, function(i, activity) {
console.log(activity.date_time);
for (var key in dateRangeLabels) {
if (dateRangeLabels.hasOwnProperty(key)) {
//console.log(key, dateRangeLabels[key]);
if(dateRangeLabels[key]['dateFunc'] == 'inRange'){
if(dates.inRange(activity.date_time, dateRangeLabels[key]['start'], dateRangeLabels[key]['end'])){
return groups[key].push(activity);
}
}else{
if(dates.compare(activity.date_time, dateRangeLabels[key]['start'])){
return groups[key].push(activity);
}
}
}
}
}); // end each
//iterate out and print to the screen:
out.innerHTML =JSON.stringify(groups, null, "\t");
Summary
I need to take my JSON object and parse over it, checking the Date values in it and inserting a Date Divider in-between some of the records.
I then need to print the JSON object into the DOM in the correct order with the date dividers injected in there as well.
My demo here does most of the work already http://jsfiddle.net/0vsz8jk4/19/ I just need help with parsing the final result into HTML and injecting each JSON item into the DOM.
The current demo takes my JSON object and iterates over each item.
It then compares the date in each item to determine which date divider group it should be under.
It then pushes that row/item on the array of Date Dividers under the correct date divider key.
I need to iterate the new date divider array/object and be able to inject the date divider into the DOM and then be able to inject all of its child items into the DOM under it.
If a data divider does not have any child items, then that divider should not be injected into the DOM.
I have a function already built to take the JSON data for the current row passed into it and it will generate the correct HTML based on the data inside the JSON item and return the HTML as a string which will then be injected into the DOM>
So I really just need help with iterating over this new data to the point that I will have access to send each item/row into my html generating function.
