Develop Reference

JSON only works if copy code literally, generated code does not work, why?

I have following code;
var fechas = "";
for (i = 0; i < response.data.length; i++) {
var fechas = fechas + "{\"text\":" + "\"" + response.data[i].ADP_Asunto + "\"" + ", \"startDate\": new Date (" + response.data[i].ADP_FechaInicio.substring(0, 4) + "," + (response.data[i].ADP_FechaInicio.substring(5, 7) - 1) + "," + response.data[i].ADP_FechaInicio.substring(8, 10) + "), \"endDate\": new Date(" + response.data[i].ADP_FechaFin.substring(0, 4) + "," + (response.data[i].ADP_FechaFin.substring(5, 7) - 1) + "," + response.data[i].ADP_FechaFin.substring(8, 10) +",23,59)},";
}
fechas = fechas.substring(0, fechas.length - 1) + "";
var completo = "[" + fechas + "]";
console.log(completo);
$("#scheduler").dxScheduler({
dataSource: JSON.parse(completo);,
........................................................
And does not work, but if I copy console.log output and assign to "data", and then link to datasource, it works perfect;
var fechas = "";
for (i = 0; i < response.data.length; i++) {
var fechas = fechas + "{\"text\":" + "\"" + response.data[i].ADP_Asunto + "\"" + ", \"startDate\": new Date (" + response.data[i].ADP_FechaInicio.substring(0, 4) + "," + (response.data[i].ADP_FechaInicio.substring(5, 7) - 1) + "," + response.data[i].ADP_FechaInicio.substring(8, 10) + "), \"endDate\": new Date(" + response.data[i].ADP_FechaFin.substring(0, 4) + "," + (response.data[i].ADP_FechaFin.substring(5, 7) - 1) + "," + response.data[i].ADP_FechaFin.substring(8, 10) +",23,59)},";
}
fechas = fechas.substring(0, fechas.length - 1) + "";
var completo = "[" + fechas + "]";
console.log(completo);
var data = [{ "text": "ASUNTO NUEVO2", "startDate": new Date(2020, 0, 01), "endDate": new Date(2020, 0, 01, 23, 59) }, { "text": "ASUNTO NUEVO2", "startDate": new Date(2020, 0, 25), "endDate": new Date(2020, 0, 28, 23, 59) }, { "text": "Asunto nuevo Bo", "startDate": new Date(2020, 11, 31), "endDate": new Date(2020, 11, 31, 23, 59) }]; // console.log(data);
$("#scheduler").dxScheduler({
dataSource: data,
I tried jsons.parse/stringify, "[" + ... + "]" ... and nothing works

Finally I got it! with the next code;
var fechas = "";
for (i = 0; i < response.data.length; i++) {
var fechas = fechas + "{'text':" + "'" + response.data[i].ADP_Asunto + "'" + ", 'startDate': '" + response.data[i].ADP_FechaInicio.substring(0, 4) + "-" + response.data[i].ADP_FechaInicio.substring(5, 7) + "-" + response.data[i].ADP_FechaInicio.substring(8, 10) + "', 'endDate':'" + response.data[i].ADP_FechaFin.substring(0, 4) + "-" + (response.data[i].ADP_FechaFin.substring(5, 7)) + "-" + response.data[i].ADP_FechaFin.substring(8, 10) + "'},";
}
fechas = fechas.substring(0, fechas.length - 1) + "";
var completo = "[" + fechas + "]";
var myObject = eval('(' + completo + ')');
console.log(myObject);
$("#scheduler").dxScheduler({
dataSource: myObject,

how to draw the line between the points in javascript

i try to plot the line(border right) in a table using javascript code . My code
plotPoints(item,  index) {
var myElement = document.querySelector("#image-" + item + "-" + index);
(id is id = "image-0-4")
var position = this.getPosition(myElement);
console.log("The image is located at: " + position.x + ", " + position.y);
var first = index + 1;
var second = index + 2;
var third = index + 3;
var testDiv1 = document.getElementById("p1-" + item + "-" + first);
var position1 = this.getPosition(testDiv1);
console.log("The image is located at 1: " + position1.x + ", " + position1.y);
var testDiv2 = document.getElementById("p1-" + item + "-" + second);
var position2 = this.getPosition(testDiv2);
console.log("The image is located at 1: " + position2.x + ", " + position2.y);
var testDiv3 = document.getElementById("p1-" + item + "-" + third);
var position3 = this.getPosition(testDiv3);
console.log("The image is located at 1: " + position3.x + ", " + position3.y);
}
getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
I try to plot the line to connect the same number block .Using position function get all the block x and y position.
how to plot the line between the same number block( like number 1 block to connect line each column )

JS dropdown 14 days in future [duplicate]

This question already has answers here:
How to get next seven days from X and format in JS
(6 answers)
next 7 days in drop-down list [duplicate]
(3 answers)
Closed 5 years ago.
I am trying to create a dropdown list that shows 14 days in the future via JS.
Right now it is showing only 7 days but with duplicates.
What is wrong?
screenshot dropdown
function createDates() {
$("#DT").find('option').remove().end().append('<option value="" selected>~#SELECT_DT~</option>');
var counter = 0;
var index = 1;
console.log(holidays);
while (counter < 14) {
var date = new Date();
date.setDate(date.getDate() + index);
var day = date.getDay();
var month = date.getMonth() + 1;
var isWeekend = (day == 6) || (day == 0);
var checkTime1 = getTimeOfDate(date.getFullYear(), month, date.getDate());
var isFound = false;
var selected = "";
if (index == ~(IF(#DT<>'',#DT,0))~) {
selected = 'selected="selected"';
}
if (!isWeekend) {
if (holidays.length > 0) {
$.each(holidays, function(key, obj) {
var hDay = new Date(obj.DT);
var checkTime2 = getTimeOfDate(hDay.getFullYear(), hDay.getMonth() + 1, hDay.getDate());
if (checkTime1 == checkTime2) {
isFound = true;
}
});
} else {
$("#DT").append('<option value="' + index + '"' + selected + '>' + getDayString(day) + ' ' + date.getDate() + ' ' + getMonthString(month) + ' ' + date.getFullYear() + '</option>');
counter++;
}
if (!isFound) {
$("#DT").append('<option value="' + index + '"' + selected + '>' + getDayString(day) + ' ' + date.getDate() + ' ' + getMonthString(month) + ' ' + date.getFullYear() + '</option>');
counter++;
}
}
index++;
}
}

The second if block should come under the first, also set isFound to false in the beginning:
if (!isWeekend) {
isFound = false;
if (holidays.length > 0) {
$.each(holidays, function(key, obj) {
var hDay = new Date(obj.DT);
var checkTime2 = getTimeOfDate(hDay.getFullYear(), hDay.getMonth() + 1, hDay.getDate());
if (checkTime1 == checkTime2) {
isFound = true;
}
});
if (!isFound) {
$("#DT").append('<option value="' + index + '"' + selected + '>' + getDayString(day) + ' ' + date.getDate() + ' ' + getMonthString(month) + ' ' + date.getFullYear() + '</option>');
counter++;
}
} else {
$("#DT").append('<option value="' + index + '"' + selected + '>' + getDayString(day) + ' ' + date.getDate() + ' ' + getMonthString(month) + ' ' + date.getFullYear() + '</option>');
counter++;
}
}

repeat the function if element not found

I'm trying to make a script that will notify you if someone gets inline on Whatsapp web and I have this script:
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function onlineCheck() {
var y = document.querySelector('[title="online"]');
var d = new Date();
if (y == null) {
// I want it to repeat onlineCheck() after 1 second
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours())
+ ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds())
+ " " + "Notification sent");
}
}
}
and I want to replace // I don't know what to put here with something that will run the function onlineCheck()
how should I do that
I first had this script:
var onlineCheck1 = window.setInterval(function(){
var x = document.querySelector('[title="online"]');
var name = $('#main>header>div.chat-body>div.chat-main>.chat-title>span').text()
var d = new Date();
if (x == null) {
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours())
+ ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds())
+ " " + name + " " + "was" + " " + "offline");
} else {
if (x.innerText === "online") {
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours())
+ ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds())
+ " " + name + " " + "was" + " " + "////online///");
} else {
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours())
+ ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds())
+ " " + name + " " + "was" + " " + "offline");
}
} ,1000);
but I want it to not do any thing with console log I just want it to repeat itself till it finds the element with the title="online"
Note: I'm using chrome's console to run the script and you can try it yourself if you want.

Invoke the function itself. This is called Recursion. You must be careful to prevent onlineCheck()calls itself infinitely
function onlineCheck()
{
var y = document.querySelector('[title="online"]');
var d = new Date();
if (y == null)
{
onlineCheck();
}
else
{
if (y.innerText === 'online')
{
new Notification("contact is online");
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + " " + "Notification sent");
}
}
}

You can simply call the function as below
function onlineCheck() {
var y = document.querySelector('[title="online"]');
var d = new Date();
if (y == null) {
onlineCheck();
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + " " + "Notification sent");
}
}
}

You need recursion technique.
While using this technique, the recursive function should need a termination condition to end the process (otherwise the process will infinitely iterates which will eventually cause Maximum call stack size exceeded error)
function onlineCheck() {
var y = document.querySelector('[title="online"]');
var d = new Date();
if (y == null) {
// Be sure to add a termination condition
onlineCheck()
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + " " + "Notification sent");
}
}
}

As others have pointed out, you could just call the function directly: onlineCheck();. However, the loop condition (document.querySelector('[title="online"]') != null) won't have changed if you do that, so it'll go into an infinite loop/recursion.
Here's another way:
function onlineCheck() {
var y = document.querySelector('[title="online"]');
var d = new Date();
if (y == null) {
setTimeout(onlineCheck, 10);
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
console.log(d.toLocaleDateString() + "|" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + " " + "Notification sent");
}
}
}
This re-schedules onlineCheck to be called after 10 milliseconds, giving the page a chance to update before checking again. You may want to increase this number to, say, 1000; this way it'll check once every second instead of spinning in place, going "are we done yet? how about now? how about now? and now? now? now?".

Javascript Date Function Not working

Hi I am trying to add 31 days to 'myDate' which is the current date. It is supposed to get the date add 31 days, then the convertDate function is supposed to translate it to something like 'Nov 31, 2012'. But it doesn't work. Does anyone know why?
Here is the primary function...
function process (infoarray) {
var myDate = new Date();
//var final = convertDate(myDate);
var length = infoarray.length;
var final_string;
for (var b = 0; b < length; b++) {
if (b == 0) {
if (infoarray[b][3] == 'After') {
final_string = '<b>' + infoarray[b][3] + ' ' + infoarray[b][1] + '</b><br/>' + infoarray[b][0] + '<br/>';
} else {
final_string = '<b>' + infoarray[b][1] + ' ' + infoarray[b][3] + ' ' + infoarray[b][2] + '</b><br/>' + infoarray[b][0] + '<br/>';
}
} else {
if (infoarray[b][3] == 'After') {
final_string = final_string + '<br/><b>' + infoarray[b][3] + ' ' + convertDate(myDate.setDate(myDate.getDate() + 31)) + '</b><br/>' + infoarray[b][0] + '<br/>';
} else {
final_string = final_string + '<br/><b>' + infoarray[b][1] + ' ' + infoarray[b][3] + ' ' + infoarray[b][2] + '</b><br/>' + infoarray[b][0] + '<br/>';
}
}
}
return final_string;
}
Here is the line i am focused on from the function above...
final_string = final_string + '<br/><b>' + infoarray[b][3] + ' ' + convertDate(myDate.setDate(myDate.getDate() + 31)) + '</b><br/>' + infoarray[b][0] + '<br/>';
Here is the convertDate function...
function convertDate(d) {
var day = d.getDate();
if (day < 10) {
day = '0' + day;
}
var year = d.getFullYear();
var month = d.getMonth();
var months=['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct', 'Nov','Dec'];
var currentMonth = months[month];
return (currentMonth + ' ' + day + ', ' + year);
}

myDate.setDate(...) modifies the value of the Date instance, but doesn't return anything.
You need to call setDate first, then pass the variable to your function.

Here.
First calculate then call
DEMO;
var myDate = new Date();
myDate.setDate(myDate.getDate()+31);
final_string = final_string + '<br/><b>' +
infoarray[b][3] + ' ' +
convertDate(myDate) + '</b><br/>' + infoarray[b][0] + '<br/>';
Or add it to the function:
.... convertDate(myDate,31) + ....
With
function convertDate(d,offset) {
if ( offset ) d.setDate(d.getDate()+offset);
var day = d.getDate();
if (day < 10) {
day = '0' + day;
}
var year = d.getFullYear();
var month = d.getMonth();
var months=['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct', 'Nov','Dec'];
var currentMonth = months[month];
return (currentMonth + ' ' + day + ', ' + year);
}
DEMO

By using setDate, you tell the Date object to set the day number to something between 32 and 62, which doesn't make much sense.
A good way to add 31 days would be to use getTime, which returns the number of mseconds ellapsed since 1st Jan 1970:
myDate.setTime( myDate.getTime()+31*24*60*60*1000 );
//31Days x 24 hours x 60 minutes x 60 seconds x 1000 msecs