We Keep Coding

How to handle Cannot read properties of undefined (reading '0') error?

How to handle Cannot read properties of undefined (reading '0'). I want to trigger this in ajax success of select onchange.
var date_sched = [];
const output = {
[date_sched[0].user_id]: date_sched[0].dates,
};
//var doctor_dates;
$("#schedDay").on("show.datetimepicker update.datetimepicker",
function() {
highlight();
});
function highlight() {
// var dateToHilight = text;
var dateToHilight = output;
var array = $("#schedDay").find(".day").toArray();
for (var i = 0; i < array.length; i++) {
var date = array[i].getAttribute("data-day");
if (dateToHilight[doctor_dates].indexOf(date) > -1) {
array[i].classList.add('highlighted');
}
}
}

Show all tabs content vanilla js

How can I change this javascript code, that when I click on "Green" I want the content from all tabs to be displayed? https://codepen.io/wangel13/pen/OXBrRp
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();

Take a look at this:
'use strict';
function Tabs() {
var bindAll = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].addEventListener('click', change, false);
}
}
var clear = function() {
var menuElements = document.querySelectorAll('[data-tab]');
for(var i = 0; i < menuElements.length ; i++) {
menuElements[i].classList.remove('active');
var id = menuElements[i].getAttribute('data-tab');
document.getElementById(id).classList.remove('active');
}
}
function makeAllActive() {
var tabs = document.querySelectorAll('.b-tab');
Array.from(tabs).map(item => {
item.classList.add('active');
});
}
var change = function(e) {
clear();
e.target.classList.add('active');
var id = e.currentTarget.getAttribute('data-tab');
if(id === "green") {
makeAllActive();
return;
}
document.getElementById(id).classList.add('active');
}
bindAll();
}
var connectTabs = new Tabs();

How do i get the specific values from json data in React

I am getting an error in console while i am trying to get a specific value from json data. This is the error:
'Uncaught TypeError: Cannot read property 'processen_id' of undefined'
Here is my code:
$.get("/getProces", function (data) {
if (data.error) {
} else {
for (var i = 0; i <= data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
}
})
}
This is what i get when i log (data):

You have a mistake in your code in the for loop
<= instead of <
$.get("/getProces", function (data) {
if (data.error) {
} else {
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
}
})
}

The error message means that obj is undefined. That means, that data.message[i] gets an undefined value. The problem is the loop. You get an i that is larger then the array. Change <= to <:
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}

index out of range: for (var i = 0; i <= data.message.length; i++) { should be for (var i = 0; i < data.message.length; i++) { instead.
you can also optimize your code in this way:
$
.get("/getProces")
.then((res) => res.error ? Promise.reject(res) : Promise.resolve(res))
.then((data) => {
for (var i = 0; i < data.message.length; i++) {
var obj = data.message[i]
console.log(obj.processen_id)
}
})

How to check whether specific items inside an array have a value? Javascript

I have a function which gets values from elements:
function getTransactionValues() {
var o = {};
o.reservations = [];
$('#custom-headers option:selected').each(function (i, selected) {
o.reservations[i] = $(selected).val();
});
o.amount = $('input[name=amount-price]').val();
o.currency_value = $('input[name=currency-value]').val();
o.currency_name = $('.currency_appendto option:selected').html();
o.actual_amount = $('input[name=actual-amount]').val();
o.actual_remaining = $('input[name=actual-remaining]').val();
o.funds_arrival_date = $('input[name=funds-arrival]').val();
o.paid_to = $('.paidto option:selected').html();
o.checkbox = $('.multi-transaction:checked').map(function () {
return this.value
}).get();
return o;
}
Now i want to check whether amount, actual_amount and funds_arrival_date are filled. if they are i will release the disabled class from a button. i've tried
var check_review = function () {
var a = getTransactionValues();
var options = [a.amount, a.actual_amount, a.funds_arrival_date];
for(i = 0; i < options.length; i++) {
if(options[i].length > 0) {
$('a[name=review_button]').removeClass('disabled');
}
else{
//this array is empty
alert('There is a problem!');
}
}
}
$('.test').click(function() {
check_review();
});
But it doesn't seems to be working..

Remove disabled attribute using JQuery?
Can you please look at above link, I think we should use $('.inputDisabled').prop("disabled", false);

Even if a single array element will be non empty then your code will remove the class disabled from the a. To make sure that all the elements of array are non empty and then only you want to remove the class then the way is:
for(i = 0; i < options.length; i++) {
if(options[i].length > 0) {
$('a[name=review_button]').removeClass('disabled');
}
else{
$('a[name=review_button]').addClass('disabled');
}
}
Or the other way is
var check = true;
for(i = 0; i < options.length; i++) {
if(options[i].length == 0) {
check = false;
}
}
if(check ) $('a[name=review_button]').removeClass('disabled');

Try using Array.prototype.every()
if (options.every(Boolean)) {
$("a[name=review_button]").removeClass("disabled");
} else {
// do other stuff
}

An interval that calls a function inside an object, which also calls a function inside that object

function airEngineJS (canvasArg, properties) {
this.canvas = (canvasArg == "undefined")? trace("Failed to set up canvas for airEngineJS") : canvasArg;
this.cameras = [];
this.displayObjects = [];
this.hudDisplayObjects = [];
this.fps = (properties == "undefined" || properties.fps == "undefined")? 30 : properties.fps;
if (properties == "undefined" || properties.autoinit == "undefined" || properties.autoinit == true){
this.keyboard = new keyboardJS();
this.keyboard.init();
this.cameras.push(new airCameraJS(this));
}
this.enterframe = setInterval(this.intervalCaller, 1000/this.fps);
trace("A new airEngineJS has been created");
}
airEngineJS.prototype = {
intervalCaller : function () {
this.mainLoop();
},
logic : function () {
for (var i = 0; i < this.displayObjects.length; ++i){
this.displayObjects[i].logic();
}
for (var j = 0; j < this.cameras.length; ++j){
this.cameras[j].logic();
}
},
render : function () {
for (var i = 0; i < this.cameras.length; ++i){
for (var j = 0; j < this.displayObjects.length; ++j){
this.displayObjects[j].renderOn(this.cameras[i]);
}
}
for (var i = 0; i < this.hudDisplayObjects.length; ++i){
this.hudDisplayObjects[i].renderOn(this.canvas);
}
},
mainLoop : function () {
this.logic();
this.render();
}
}
The interval [this.enterframe = setInterval(this.intervalCaller, 1000/this.fps);] calls correctly (this.intervalCaller), but this tries to call (this.mainLoop()) in the DOM.
Any suggestions about how should I do it? :(

You can close over the actual function call like this:
var self = this;
this.enterframe = setInterval(function() {
self.intervalCaller();
}, 1000/this.fps);
It first creates a reference to the new instance which is then used inside the closure passed to setInterval.