Get/iterate over properties that are not in object

Question

According to this question, I need to chek if a property is not in an object:

So, we've some styling:

.foo {
    top: 13px;
    width: 37px;
}

...and an object like this one:

var keyframe = {
    0: {
        top: 0
    },
    1000: {
        top: 100
    },
    2000: {
        width: 100
    }
};

now I need to iterate over all properties that are not in the next/previous frame-item, to populate the missing property with the css-values from an jQuery-object.

So that the final object looks like this:

var keyframe = {
    0: {
        top: 0,
        width: '37px'
    },
    1000: {
        top: 100,
        width: '37px'
    },
    2000: {
        top: 100,
        width: 100
    }
};

I've tried something like this:

http://fiddle.jshell.net/WdNge/

var $foo = $('.foo');
for (var key in keyframe) {
    var obj = keyframe[key];
    for(var ok in obj) {
        if (!(ok in obj)) obj[ok] = $foo.css(ok);
    }
}

But it seems that

if (!(ok in obj)) // is always `truthy`

however if I declare it directly

if (!('top' in obj)) // it works...

Any ideas?

Update

I even tried something like this, but no success:

http://fiddle.jshell.net/WdNge/1/

var $foo = $('.foo');
var keys = [];
for (var key in keyframe) {
    var obj = keyframe[key];
    var k = Object.keys(obj);
    keys.push(k[0]);
    for(var i = 0; i < keys.length; i++) {
        var ok = keys[i];
        if (!(ok in obj)) obj[ok] = $foo.css(ok);
    }
}

Well, `for ... in` iterates over existing properties of the object, so the test `prop in obj` will always be true. — Felix Kling, Jul 16 '13 at 13:53
You need a separate array or object that lists all the required keys of an object. You iterate over that array, and check whether the key is in `obj`. — Barmar, Jul 16 '13 at 13:56
@MohammadAreebSiddiqui Whoops, forgot to add `ok = keys[i];`, updated it... — yckart, Jul 16 '13 at 14:05

Jon · Accepted Answer · 2013-07-16T14:14:50.633

0

AFAIK you can't extract the specified CSS properties from a class using jQuery/Javascript.

That means that you'll have to a) store the .foo class specification separately as JSON within your Javascript or b) iterate over all CSS properties that jQuery is aware of.

CSS

.foo {
    top: 0;
    width: 100px;
}

Javascript

var foo_styles = { top: 0, width: "100px" },
    keyframe = {
    0: {
        top: 0
    },
    1000: {
        top: 100
    },
    2000: {
        width: 100
    }
};
for (var key in keyframe) {
    var frame = keyframe[key];
    for(var frameProperty in foo_styles) {
        if (!(frameProperty in frame)) {
            frame[frameProperty] = foo_styles[frameProperty];
        } else {
            // Update with last value from keyframe
            foo_styles[frameProperty] = frame[frameProperty];
        }
    }
}

edited Jul 16 '13 at 14:14

answered Jul 16 '13 at 14:09

Jon

12,684
4
31
44

Great! Looks good so far, problem is, that `top` is `0` in the last frame, and not `100`... – yckart Jul 16 '13 at 14:11
@yckart I've made an update that will overwrite the `foo_styles` values if `keyframe` has that CSS property already – Jon Jul 16 '13 at 14:16
@yckart I think thg435's answer to your original question is much much better than this! – Jon Jul 16 '13 at 14:18

Get/iterate over properties that are not in object

1 Answers1

Linked