I am working on this animation function but I have a problem. I can't seem to perform what should be an easy task, I can not get the length of an object. If you check out that jsFiddle you can see that I am running alert(properties.length); and it is returning undefined. Can anyone see why this might be?
-
2possible duplicate of Length of Javascript Associative Arrayripper234– ripper2342012-01-31 10:15:26 +00:00Commented Jan 31, 2012 at 10:15
Add a comment
|
5 Answers
This is supported in node.js and newer environments.
var obj = {a: "a", b: "b"};
Object.keys(obj).length // 2
1 Comment
Igor Parra
Not support in IE8, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
JavaScript object simply do not have a length property, only Arrays do. If you want to know the number of properties that are defined on a object, you have to iterate over them and count them.
Also, your for in loop is prone to bugs due extension of Object.prototype since in will traverse the complete prototype chain and enumerate all the properties that are on the chain.
Example
// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i); // logs both 'moo' AND 'bar'
}
You have to use the hasOwnProperty method on the object in order to filter out those unwanted properties.
// still the foo from above
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i); // only logs 'moo'
}
}
Many JavaScript frameworks out there extend the prototype, not using hasOwnProperty often leads to horrible bugs.
Update
Concerning the actual problem that your code is not animation both properties.
for(var p in properties) {
...
for(var i = 0; i <= frames; i++)
{
setTimeout((function(exti, element) {
return function() {
// p gets overriden by for outer for in loop
element.style[p] = original + (pixels * exti) + 'px';
}
// you need to pass in a copy of the value of p here
// just like you do with i and element
})(i, element), i * (1000 / 60), element);
}
....
}
13 Comments
Martin Jespersen
On the same count alot of libraries out there (like jQuery) will fall apart horribly if you extend object.prototype, so if you use one of them hasOwnProperty is just a waste of cpu cycles.
Ivo Wetzel
@Martin Jespersen So you sell of the code with "WARNING DO ONLY USE WITH FRAMEWORKS A, B AND C" printed on them? Sorry, but using
hasOwnProperty is* a good practice.Martin Jespersen
nope i am just tired of a web filled with javascript code that is so far from being optimized that even chrome chokes on it, then again, i guess i should be thankful since i make my money cleaning up the mess others make :P
Ivo Wetzel
@Martin Then go never use jQuery again, it's filled with calls to hasOwnProperty. What you are doing is premature optimization, nothing else.
Ivo Wetzel
@Wofly You need to pass
p into the animation wrapper too, just like i and element since the for in loop will otherwise override the p. |
If you are using Underscore.js, you can use _.size():
_.size({one : 1, two : 2, three : 3});
=> 3
1 Comment
RaphaelDDL
I'm yet to see the source but I hope that
size() takes hasOwnProperty into account.Objects have no length, you'll need to use an array if you want that.
If you have to find the number of properties in an object there is only one way:
var length =0;
for(var i in obj) length++;
4 Comments
Ivo Wetzel
Use hasOwnProperty, please.
Olical
Why, how? Where does hasOwnProperty apply to this?
Jamund Ferguson
Better to just not update Object.prototype? Who does that? This is actually a great example!
Junaid Qadir Shekhanzai
@IvoWetzel an example would be appreciated. I've used Martin Jespersen's answer here jsfiddle.net/jeykeu/qAH48 Is it the way to go?
Here's @Junaid Qadir Shekhanzai's general function for "finding the length of an object" (which as we're told, should properly be called "counting the properties of an object"). It combines solutions from @Ivo Wetzel and @Martin Jespersen:
function countProperties(myObj){
var length = 0;
if(typeof myObj != 'object'){
return false;
}
for(var i in myObj) {
length++;
}
return length;
}
