Note that there are some explanatory texts on larger screens.

plurals
  1. POMerge json-object and populate next/prev items
    primarykey
    data
    text
    <p>How can I <em>pre</em>-populate an JSON-Object which contains some css-properties. Where I need to add all <em>not-contained</em> properties to the previous object and the same for all next up items?</p> <p>The statement I need:</p> <pre><code>if (property is not in object) object[property] = $('.foo').css(property); </code></pre> <p>We have for example an element with the following styling:</p> <pre><code>.foo { top: 0; width: 100px; } </code></pre> <p>And the following <code>keyframe</code>-alike object:</p> <pre><code>var keyframe = { 0: { top: 0 }, 1000: { top: 100 }, 2000: { width: 100 } }; </code></pre> <p>Here we need to populate all previous items, in this case:</p> <ul> <li><code>0: width = 0</code></li> <li><code>1000: width = 0</code></li> </ul> <p>...we get something like this:</p> <pre><code>var keyframe = { 0: { top: 0, width: 0 }, 1000: { top: 100, width: 0 }, 2000: { top: 100, width: 100 } }; </code></pre> <p>...and further, we need to prefill all next items:</p> <ul> <li><code>2000: top = 100</code></li> </ul> <p>What results in:</p> <pre><code>var keyframe = { 0: { top: 0 }, 1000: { top: 100 }, 2000: { top: 100, width: 100 } }; </code></pre> <p>Our final object needs to be like this one:</p> <pre><code>var keyframe = { 0: { top: 0, width: 0 }, 1000: { top: 100, width: 0 }, 2000: { top: 100, width: 100 } }; </code></pre> <h3>Update</h3> <p><a href="https://stackoverflow.com/a/17677380/1250044">T.J. Crowder answer</a> looks good so far, however <strong>the problem</strong> is that I don't know what properties are in the <code>keyframe</code>-object... So it can be, that there are more/other properties in the keyframe than <code>width</code> and <code>top</code>.</p> <h2>Update2</h2> <p>Currently I've the following:</p> <pre><code>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); } } </code></pre> <p><strong>But</strong> it seems that</p> <pre><code>if (!(ok in obj)) // is always `truthy` </code></pre> <p>however if I do it by declaring it directly</p> <pre><code>if (!('top' in obj)) // it works... </code></pre> <p>Any ideas?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload