I have an array of events and i'd like to iterate through that array and find the next upcoming event based on its start time compared to the current start time.
Basically, say its currently 3:30pm and there are events starting at 12:00pm, 2pm, 4pm, 5pm.. I'd like to get the event that starts at 4pm.
SAMPLE DATA:
{
"cache_time": 1470678992,
"events": [
{
"title": "EVENT TITLE",
"start_time": "12:00AM",
"end_time": "12:00AM"
},
{
"title": "EVENT TITLE",
"start_time": "8:00AM",
"end_time": "10:00AM"
},
{
"title": "EVENT TITLE",
"start_time": "10:00AM",
"end_time": "12:00PM"
},
{
"title": "EVENT TITLE",
"start_time": "1:00PM",
"end_time": "2:30PM"
},
{
"title": "EVENT TITLE",
"start_time": "2:30PM",
"end_time": "3:00PM"
},
{
"title": "EVENT TITLE",
"start_time": "3:00PM",
"end_time": "4:00PM"
}
]
}
EDIT:
what i've done so far to get the CURRENT meeting but i'm having trouble getting the next meeting when the current meeting is UNKNOWN.
var _this = this;
var date = new Date();
var currentHour = date.getHours();
var currentMins = date.getMinutes();
var reqStartTime = new Date();
reqStartTime.setHours(currentHour, currentMins, 0);
var reqEndTime = new Date(reqStartTime.getTime() + 2 * 60000);
for (var e in EVENT_DATA.events) {
var start_time = EVENT_DATA.events[e].start_24time;
var end_time = EVENT_DATA.events[e].end_24time;
var startTime = new Date();
var endTime = new Date();
startTime.setHours(start_time.substring(0,2), start_time.substring(3,5), 0);
endTime.setHours(end_time.substring(0,2), end_time.substring(3,5), 0);
if ( (reqEndTime > startTime && reqEndTime < endTime) || (reqStartTime > startTime && reqStartTime < endTime) ) {
return EVENT_DATA.events[e];
}
}
Because your start_time is a non-standard format, one thing we will need to do is convert it into a usable value. We will combine it with the start_date to get our comparison value.
Since we can't assume the events are in order, we'll also be taking that into account.
(function(data) {
var currentTime = new Date();
var getStartTime = function(event) { // This function converts the time into a usable format and returns it as a Date object
try {
return new Date(event.start_date + ' ' + event.start_time.replace(/(AM|PM)/, ' $1'));
} catch(ex) { return null; }
};
var sortedEvents = jQuery(data.events).sort(function(a, b) {
return getStartTime(a) > getStartTime(b) ? 1 : -1;
}).toArray(); // Get an array of sorted events
for (var i = 0; i < sortedEvents.length; i++) {
if (getStartTime(sortedEvents[i]) < currentTime) { continue; }
return sortedEvents[i]; // Starts now or after
}
return null; // No matches
})(sample_data);
Original sample data from question:
"events": [
{
"title": "EVENT TITLE",
"start_time": "12:00AM",
"end_time": "12:00AM",
"start_24time": "00:00",
"end_24time": "00:00",
"start_date": "July 29, 2016",
"end_date": "September 03, 2016",
"display_date": "July 29 - September 03, 2016"
}, ...
]
Related
I want to update array in object for each employeeID.
My "selected" array has the employeeID's to add.
The function adds the same time and jobs for all employees but after each iteration all the emplyeeIDs are the last employeeID that was pushed.
selected = [ "01PILGAR", "01DERREX", "01SANJAC" ]
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
this.currentJob.time.push(newtime);
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},
This will add three time information to the array with all as the employeeID as "01SANJAC"
When I look at each push the employeeID shows each item from the array being pushed.
Why is the final array have all items with the last employeeID value?
final array =
[
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" },
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" },
{ "task": "1000", "inout": { "label": "In", "value": 1 }, "time": "08:00", "detailNotes": "time", "officeNotes": "office time", "controlDateTime": "2021-09-17T14:54:13.371Z", "employeeID": "01SANJAC" }
]
This is what solved it for me:
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
// added 'Object.assign in the push
this.currentJob.time.push(Object.assign({}, newtime));
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},
In the .push i used "Object.assign({}, '')
This works for me.
updatePersonnelTime() {
console.log("updatePersonnelTime", this.time);
var newtime = this.time;
newtime.controlDateTime = new Date();
if(!this.currentJob.time){
this.currentJob.time = [];
}
for (let i=0; i < this.selected.length; i++){
newtime.employeeID = this.selected[i];
console.log('this.selected[i]: ', this.selected[i]);
// added 'Object.assign in the push
this.currentJob.time.push(Object.assign({}, newtime));
console.log('this.time: ', this.currentJob);
}
this.updateJob();
this.timeRows = this.currentJob.time
},
So, the this is about consuming an API that has a date/time property. The content should change every 3 hours by comparing current user Date/time with that of the API and also assigning past and upcoming hours in a separate an arrays to be displayed in other section of the page. I managed to assign past and upcoming dates to their respective arrays. I need to compare the date and to assign "current data" if the user Date/Time is equal to or within 3 hours in a property to display it for the whole duration of three hours.
this.dataService.getData().subscribe((data:any[])=>{
const now = new Date('2021-02-14 09:00:00');
for (const item of data) {
const apiDate = new Date(item.dateTime);
if(now.getTime() > apiDate.getTime()){
this.future.push('future dates')
} else if(now.getTime() < apiDate.getTime()){
this.past.push('past dates')
}else if(now.getTime() == apiDate.getTime()){
//in real time, they'll only be equal for one second
this.current = 'Show NOW'
}
}
This is the structure of API/Json Data retuned
[ { "number": 10, "dateTime": "2021-02-14 00:00:00" }, { "number": 20, "dateTime": "2021-02-14 03:00:00" }, { "number": 30, "dateTime": "2021-02-14 06:00:00" }, { "number": 40, "dateTime": "2021-02-14 09:00:00" }, { "number": 50, "dateTime": "2021-02-14 12:00:00" }]
a better approach to this would even be better.
Thanks
If your want to show time within range, then you can create an object with your time boundaries:
getTimeInterval = () => {
const from = new Date();
const to = new Date(from);
to.setHours(to.getHours() + 3)
return { from, to };
}
and then just check both boundaries of date from and to:
this.dataService.getData().subscribe((data:any[])=>{
const dateRange = this.getTimeInterval();
for (const item of data) {
const apiDate = new Date(item.dateTime);
if (dateRange.from.getTime() > apiDate.getTime()
&& dateRange.to.getTime() > apiDate.getTime())
{
this.future.push('future dates');
}
else if(dateRange.from.getTime() < apiDate.getTime())
{
this.past.push('past dates')
}
else if (dateRange.from.getTime() >= apiDate.getTime()
&& dateRange.to.getTime() <= apiDate.getTime())
{
this.current = 'Show NOW'
}
}
I am trying to get the count from JSON response which has current date in the key.
Json Response:
[
{
"type": {
"id": "mobile",
"name": "mobile",
"description": "",
"total_count": 0
},
"counts": [
{
"date": "2018-09-06",
"timestamp": 1536192000000,
"count": 20
},
{
"date": "2018-09-07",
"timestamp": 1536278400000,
"count": 10
}
]
},
{
"type": {
"id": "lap",
"name": "lap",
"description": "",
"total_count": 0
},
"counts": [
{
"date": "2018-09-06",
"timestamp": 1536192000000,
"count": 19
},
{
"date": "2018-09-07",
"timestamp": 1536278400000,
"count": 20
}
]
}
]
My New try as per vikscool code:
var json_count = JSON.parse(getcounts);
var curDate = getCurrentDate();
var mobilcount = () => json_count.map(ct => {
const count = ct.counts;
const getDate = count.find(dt => dt.date === curDate);
window.alert('count is ', getDate.count);
return {getDate};
});
mobilcount();
function getCurrentDate () {
var nowDate = new Date();
var month = (nowDate.getMonth() + 1).toString().length == 1
? '0' + (nowDate.getMonth() + 1)
: (nowDate.getMonth() + 1);
var day = nowDate.getDate().toString().length == 1
? '0' + nowDate.getDate()
: +nowDate.getDate();
return nowDate.getFullYear() + '-' + month + '-' + day;
}
output: "count is "
but there is no count printed from json.
Is there any solution in Javascript I can get the current date and get the counts.
I need to get the count as 10 in mobilcount.
As the dates are stored in the JSON Array key named as the counts of the first object of the json_count you can not fetch it using:
var instance_count=json_count[0].values[2].count;
As your json object does not have any key named as values.
What you have to do is first access the counts key then get the particular object from it which contains the particular(current date as in your case) and then get the counts from it.
Below is a sample code to get the particular date's count:
//assuming this is the Json response you are getting as complete JSON response is not provided by the OP.
var getcounts = `[{"type":{"id":"mobile","name":"mobile","description":"","total_count":0},"counts":[{"date":"2018-09-05","timestamp":1533686400000,"count":0},{"date":"2018-09-06","timestamp":1533772800000,"count":8}]}]`;
//parsing the given json String
var json_count = JSON.parse(getcounts);
function getCountForCurrentDate() {
var curDate = getCurrentDate(); //for which the data is to be fetched and making in format of the dates in JSON as yyyy-mm-dd
//finding the particular object that contains the current date
var searchedObj = json_count[0]['counts'].find(f => f['date'] == curDate);
if(searchedObj!==undefined)
console.log('count is', searchedObj['count']);
}
function getCurrentDate() {
var nowDate = new Date();
var month = (nowDate.getMonth() + 1).toString().length == 1 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1);
var day = nowDate.getDate().toString().length == 1 ? '0' + nowDate.getDate() : +nowDate.getDate();
return nowDate.getFullYear() + '-' + month + '-' + day;
}
getCountForCurrentDate();
Here in the snippet above, i have created two functions getCurrentDate() to get the current date in the format it is stored in JSON response and getCountForCurrentDate() to get the count from the json_count variable.
Update 1 as per the new requirement is given by OP
The given JSON object is as follows:
var json_count = [
{
type: {
id: "mobile",
name: "mobile",
description: "",
total_count: 0
},
counts: [
{
date: "2018-09-06",
timestamp: 1536192000000,
count: 20
},
{
date: "2018-09-07",
timestamp: 1536278400000,
count: 10
}
]
},
{
type: {
id: "lap",
name: "lap",
description: "",
total_count: 0
},
counts: [
{
date: "2018-09-06",
timestamp: 1536192000000,
count: 19
},
{
date: "2018-09-07",
timestamp: 1536278400000,
count: 20
}
]
}
];
And now as the object has two entities one for mobile and another for lap we can fetch the particular values as:
var mobile = json_count.find(f=>f['type']['id']=='mobile');//comparing the value present in the json object at location type.id to 'mobile' (change it to 'lap' or anything that is present in the id of the object).
and now to get the count for it we do as:
var mobile_count = mobile.counts.find(f=>f['date']=='2018-09-07');//replace the static date with the date you want to fetch the count from
and then access the count as:
console.log(mobile_count.count);
//output:10
I need to create a calendar view with fullcalendar.io. For some dates, I have a specific price in my database and I retrieve it, but for some dates (without specific prices) I need to put the usual rates in the objects I need to create with JavaScript. Problem is now because I don't know how to make JSON for that.
In short: I need to have a price for every date, but for some dates I get data from database. How do I create such JSON objects in JavaScript?
I have this code:
var db_data = [
{
"id": 5,
"user_id": 1,
"article_id": 5,
"title": "",
"start": "2016-03-25 15:18:46"
},
{
"id": 4,
"user_id": 1,
"article_id": 5,
"price": 55,
"title": "",
"start": "2016-03-15 15:18:46"
},
{
"id": 3,
"user_id": 1,
"article_id": 5,
"price": 35,
"title": "",
"start": "2016-03-07 15:18:46"
},
{
"id": 2,
"user_id": 1,
"article_id": 5,
"price": 22,
"title": "drugi",
"start": "2016-03-05 15:18:46"
},
{
"id": 1,
"user_id": 1,
"article_id": 5,
"price": 44,
"title": "prvi",
"start": "2016-02-04 15:18:46"
}
];
// declare variables
var period_start = new Date('2016-02-02'),
period_end = new Date('2016-03-03'),
current_date = period_start,
array_of_all_dates = [];
// Create a populated array of dates
// Create a populated array of dates
while (current_date.getTime() <= period_end.getTime()) {
array_of_all_dates.push(current_date);
current_date = new Date(+current_date);
current_date.setDate(current_date.getDate() + 1);
}
// Now loop over the array of populated dates and mutate, so something like
array_of_all_dates = array_of_all_dates.map(function (date) {
var found_in_db = db_data.filter(function (db_data) {
return new Date(db_data.start.replace(" ", "T")).getTime() === date.getTime(); // You need to do this comparison better!
});
if (found_in_db.length > 0) {
return found_in_db[0];
}
var new_object = {
title: '',
start: date,
price: '{{$article->price}}'
};
console.log(new_object);
return new_object;
});
console.log('result'+array_of_all_dates);
drawCalendar(array_of_all_dates);
And with this code I get data from database and dates (start) which are not excist in database I create with JavaScript.
But with this function I get this data and I can't create calendar:
I also try with this:
// Now loop over the array of populated dates and mutate, so something like
array_of_all_dates = array_of_all_dates.map(function (date) {
var found_in_db = db_data.filter(function (db_data) {
var db_data_date = new Date(db_data.start.replace(" ", "T"));
return db_data_date.getFullYear() === date.getFullYear() &&
db_data_date.getMonth() === date.getMonth() &&
db_data_date.getDay() === date.getDay();
});
if (found_in_db.length > 0) {
return found_in_db[0];
}
var new_object = {
a_property: 'some_default_value',
start: date
};
console.log(new_object);
return new_object;
});
But currently I get this:
I don't see how this:
new Date(db_data.start.replace(" ", "T")).getTime() === date.getTime()
can ever be true. The dates in db_data have a time set in them "2016-03-15 15:18:46", but the dates you create in array_of_all_dates do not Date('2016-02-02').
Your second date comparison seems to work, but I am unclear what it is you hope to be the result of the:
array_of_all_dates.map( ... );
In some case you return an element from db_data which looks like this:
{ "id": 5", "user_id": 1, "article_id": 5, "title": "", "start": "2016-03-25 15:18:46" }
and if there was no "match" you return an object that looks like this:
{ a_property: 'some_default_value', start: date }
Note that all the original elements of array_of_all_dates are replaced by this operation.
What is it that you want to end up in array_of_all_dates so you can pass it to drawCalendar?
What's the easiest way to find the earliest start date and latest end date from the object below?
(Sorry - I realize there are a lot of similar questions already out there, but my JS skills are poor and I haven't been able to apply any of the solutions to my own data. So with that said, a code example would definitely help me out in any answers - thanks!!)
var ganttData = [
{
"id": 123456,
"name": "Sample Project",
"start": new Date(2010,11,6),
"end": new Date(2011,0,6),
"status": "Not Started",
"phase": [
{
"id": 123457,
"name": "Sample Phase",
"start": new Date(2010,11,6),
"end": new Date(2010,11,13),
"status": "Not Started",
"task": [
{
"id": 123458,
"name": "Sample Task",
"start": new Date(2010,11,6),
"end": new Date(2010,11,8),
"status": "Not Started"
}
]
},
{
"id": 123459,
"name": "Another Phase",
"start": new Date(2010,11,13),
"end": new Date(2011,0,20),
"status": "Not Started"
}
]
}
]
You could simply traverse the tree recursively
var max = new Date(-100000000*86400000);
var min = new Date( 100000000*86400000);
function compare(key,value) {
if (key == "start" && value < min)
min=value;
else if (key == "end" && value > max)
max=value;
}
function traverse(obj, fun) {
for (prop in obj) {
fun.apply(this,[prop, obj[prop]]);
if (typeof(obj[prop]) == "object") {
traverse(obj[prop], fun);
}
}
}
traverse(ganttData, compare);
> max
Thu Jan 20 2011 00:00:00 GMT+0100 (W. Europe Standard Time)
> min
Mon Dec 06 2010 00:00:00 GMT+0100 (W. Europe Standard Time)
The above worked until you changed start and end from being a Date to being a string. Now you have to do something like this
arr = "2010,11,13".split(",");
date = new Date(arr[0], arr[1], arr[2]);
before you compare.
I got the reversed min and max dates from the JavaScript Reference.
function getEarliestAndLatest(ganttData) {
var earliest = ganttData.start,
latest = ganttData.end,
phase,
task;
for (var i = 0, countPhases = ganttData.phase.length; i < countPhases; i++) {
phase = ganttData.phase[i];
if (phase.start < earliest) {
earliest = phase.start;
}
if (phase.end > latest) {
latest = phase.end;
}
if (typeof phase.task !== 'undefined') {
for (var j = 0, countTasks = phase.task.length; j < countTasks; j++) {
task = phase.task[j];
if (task.start < earliest) {
earliest = task.start;
}
if (task.end > latest) {
latest = task.end;
}
}
}
}
return { earliest: earliest, latest: latest };
}