JQuery val returning undefined - javascript

So I'm calling the following function:
function updateOutput(a){
var n = $('#selector').val();
$('#hueslide').val(a[n].hue);
$('#huetext').val(a[n].hue);
}
And I'm getting an error: "Cannot read property 'hue' of undefined."
However, when I use console.log(n), it's returning a value. And when I manually insert the same value in a[n], I get the expected result. I'm guessing this is an asynchronous issue, but the same code was working in an earlier version and I'm not sure how to fix it.
Specifically, when trying to debug updateOutput using console.log, I get the following:
console.log(n); //returns 0
console.log(a); //returns an array of objects
console.log(a[0]); //returns first object in array
console.log(a(n)); // returns undefined

That error isn't saying that n is undefined, or even a, it's saying that there is no property hue on whatever is assigned to a[n]. Whatever you are passing into updateOutput has no key to match n that also has the property hue.

Try like this:
function updateOutput(a){
$(document).ready(function(e) {
var n = $('#selector').val();
$('#hueslide').val(a[n].hue);
$('#huetext').val(a[n].hue);
});
}
You have to wait until the element are fully loaded. That's why you have to use ready method.

Okay, I figured it out. Turns out the value of 0 in n I was passing a string. So adding n = parseInt(n); resolved the issue.

Related

How to solve cannot read property "length"? [reactjs]

I am trying to get the length of an object but am getting this error message:
Uncaught TypeError: Cannot read property 'length' of undefined
I am trying to get the length and getting a popup when the length is zero.
I tried using this.props.storyboardTargets.length === 0
case 1: data not available so (!this.props.storyboardTargets)--> undefined
case 2: data was there and later deletd or cleared so need to check the length
Here is my code below:
handleShowPopupTarget = () => {
if (this.props.storyboardTargets && !this.props.storyboardTargets.length) {
console.log(this.props.storyboardTargets);
toastWarning(WARNING_MSG_NO_TARGET);
}
};
The way you have it written now does not handle the issue that this.props.storyboardTargets may be undefined. You need to update it like so:
handleShowPopupTarget = () => {
if (!this.props.storyboardTargets || !this.props.storyboardTargets.length) {
console.log(this.props.storyboardTargets);
toastWarning(WARNING_MSG_NO_TARGET);
}
};
This means if storyboardTargets is undefined, or its length is 0, toastWarning will fire.
As an alternative, you could define a default prop for your component of an empty array for storyboardTargets. That way it would never be undefined.
The error message means that storyboardTargets in undefined. Try seeing if storyboardTargets is being passed in to the component that contains your handleShowPopupTarget method.
use lodash's get, it simplifies a lot those kind of buggy checks:
_.get(this.props, 'storyboardTargets.length', 'default'); // you could use 0 instead of 'default' in your case
Your original code was
if (!this.props.storyboardTargets.length) {
And it fails because this.props.storyboardTargets is undefined and well you can not read properties of something that is undefined so it throws an error.
So after that you listened to advice and changed your code to be
if (this.props.storyboardTargets && !this.props.storyboardTargets.length)
So now this stops the undefined error from happening on this line because the truthy check on this.props.storyboardTargets prevents the evaluation of the second half of the code. So that means the code will not go into the if. but you WANT it to go into the if statement if it is not defined.
So what you need to do is change it to be an OR check so if it is NOT defined OR it does not have a length
if (!this.props.storyboardTargets || !this.props.storyboardTargets.length)
Now it goes into the if statement id it is undefined and will not throw the error.
The other solution is to see that it is undefined and set it to a default value
this.props.storyboardTargets = this.props.storyboardTargets || []
if (!this.props.storyboardTargets.length)
Now if the array is undefined, it sets it to an empty array and the if check will work correctly. Changing the data might not be the best solution if other things rely on undefined.

Why x.push[0] did not produce an error?

I made a typo, use x.push[0] instead of x.push(0). But it did not produce an error and returned undefined which make me very confused.
b.push is a function, but functions are just another kind of value – and the [] operator can attempt to access properties on any kind of value. If the property isn’t found, though, the result will be undefined, and that’s the case here; functions don’t normally have a 0 property.
var b = [];
var someFunction = b.push;
console.log('0' in someFunction); // false; function doesn’t have a 0 property
console.log(someFunction[0]); // undefined for the same reason
console.log('length' in someFunction); // true; functions have a length property!
console.log(someFunction['length']); // 1; just like someFunction.length

Split not working in javascript ,Uncaught TypeError

Can someone explain me why if condition in this code isn't working?
var zaposleni=[];
for(i=1;i<brOpcija;i++){
zaposleni.push(myOpts[i].value);
}
var zaposleniRestoran=[];
for(i=1;i<brOpcija;i++){
if(zaposleni[i].split(' ').slice(2).join(' ') == vrednostSelekta()){
zaposleniRestoran.push(zaposleni[i].split(' ').slice(0,2));
}
}
Here,i have array zaposleni where i push some values,and array is look like ["name" "surname" "restaurantName"],and then i am checking if restaurantName == vrednostSelekta() (where vrednostSelekta() is return value of some function in javascript),but i always get this error:
Uncaught TypeError: Cannot read property 'split' of undefined
at HTMLSelectElement.<anonymous> (zaposleni.js:51)
at HTMLSelectElement.handle (jquery.min.js:55)
at HTMLSelectElement.o (jquery.min.js:49)
But when i erase this if,and then type that in debugger,i get no error and it is working there..Thanks in advance!
Looks like the "zaposleni" array is empty or maybe there is only one element in it. Your for loop is starting at "i=1".
In the error, Cannot read property 'split' of undefined means that you're calling .split(...) to something that isn't defined.
This means that at the beginning of the if, the script is stopping when zaposleni[i] is not defined.
This is probably because i is bigger than the length of zaposleni at the biggest value for i, as you're iterating up to the same value, but you're starting to push at i=1 rather than i=0, as array indices in JS start at 0. In other words, you're adding a value at zaposleni[0], not zaposleni[last index value], and requiring from zaposleni[1] up to zaposleni[last index value], so the last one will be undefined.
The issue may also be that myOpts[i].value is probably undefined for some values of i, so I would recommend checking that

Type error undefined not a function - Fabric JS

I'm receiving this error after attempting to optimise some code I'm working on.
Initially I was using canvas.forEachObject(function(obj){}) which was working fine but I needed to streamline the process somewhat.
I now have a function that iterates through the canvas and adds all the relevant object type to an array that I will then use.
function getObjects(){
var canvasObjects = canvas.getObjects();
var theArray = new Array();
for(obj in canvasObjects){
if(canvasObjects[obj].get('type') == 'thisType'){
theArray.push(canvasObjects[obj]);
}
if(canvasObjects[obj].get('type') == 'group'){
var groupObjects = canvasObjects[obj].getObjects();
for(groupObj in groupObjects){
if(groupObjects[groupObj].get('type') == 'thisType'){
theArray.push(groupObjects[groupObj]);
}
}
}
}
return theArray;
}
I'm then calling a function in an animation loop that uses the array in order to determine if a collision has occurred.
Array created here:
var geoArray = getObjects();
function detectCollision(target) {
target.setCoords();
geoArray.forEachObject(function(obj)
//for(obj in geoArray) //1st attempt - same result
{
obj.setCoords();
if(obj!=target && target.intersectsWithObject(obj)){
//..do stuff
}
});
}
The array is built fine and contains the correct number of objects so I'm sure there is no problem there. The problem occurs when I run the collision function and the type error problem occurs. Searching indicates that I may not be returning the object type but I'm not sure if this is the case and if so I'm not sure how to fix it.
Many thanks for any help.
Edit: the exact error is:
[Error] TypeError: 'undefined' is not a function (evaluating 'geoArray.forEachObject')
Edit, the error occurs always within the collision loop and as soon as 'obj' is called.
The method you're using to iterate through the array is not correct. The forEachObject is not a method of a plain JavaScript Array. It is a method defined on fabric.Collection.
The error simply indicates that you trying to use an undefined type as a function; You can either iterate using the forEach method or using a common for loop.

Auto-enumeration in Javascript

I want to create C type enumerations, values automatically starting from 0.
What is wrong with the following code?
function ArrayToEnum(arr)
{
var len = arr.lenght;
en = {};
for(i=0;i<len;i++)
en[arr[i]]=i;
return en;
}
a=['foo','bar'];
b=ArrayToEnum(arr);
console.debug(b.foo);
> Undefined
I expect it to print 0 but instead(at least in Chromium 9.0) this is undefined. If instead of calling the function, I apply the body directly, it works:
var l=a.length;
for(i=0;i<l;i++) b[a[i]]=i;
console.debug(b.foo);
> 0
What is wrong with the function?
If that's your actual code, "length" is misspelled as "lenght" in the third line:
var len = arr.lenght;
I'd expect that to compile, but it would set len equal to undefined, which would prevent your loop body from executing at all. That would result in arr.foo a.k.a. arr["foo"] being undefined, as you're seeing in your output.
Also you're passing "arr" to ArrayToEnum() when your array in the previous line is called a, not arr.
The common theme here is that when you start talking about a variable you haven't defined yet. JavaScript "helpfully" defines it instead of telling you it doesn't exist yet.
I tried it in the Chrome JS console, and I got "reference error" until I fixed the "a"/"arr" problem. Once that was fixed, I got "undefined" as you describe.
When I fixed "lenght", bingo, it prints "0".

Categories