title: javascript populate nested object from other nested object
body: <p>I am rather new to JavaScript and I am following different tutorials at the moment. For visualisation of a d3js graph I like to restructure a small dataset so that the <code>d3.layout.stack()</code> function can deal with the data.
  The original dataset looks as follows. Its an array of objects:</p>
  
  <pre><code>var dats = [{ apples: 5, oranges: 10, grapes: 22 },
              { apples: 4, oranges: 12, grapes: 28 },
              { apples: 2, oranges: 19, grapes: 32 },
              { apples: 7, oranges: 23, grapes: 35 },
              { apples: 23, oranges: 17, grapes: 43 }
              ];
  </code></pre>
  
  <p>The target object should look as follows. its an Array of Array of objects:</p>
  
  <pre><code>var finaldats = [
              [{ x: 0, y: 5 },
               { x: 1, y: 4 },
               { x: 2, y: 2 },
               { x: 3, y: 7 },
               { x: 4, y: 23 }
              ],
              [{ x: 0, y: 10 },
               { x: 1, y: 12 },
               ...
  </code></pre>
  
  <p>My approach so far:</p>
  
  <pre><code>var inner = {}
          inner["x"] ;
          inner["y"] ;
  
          dats.forEach(function(d,i) {
              inner["x"] = i
              inner["y"] = dats[i].apples;
          });
  </code></pre>
  
  <p>This produces: <code>Object {x: 4, y: 23}</code>
  Its always the last element of the input array, which is fine, since the object is constantly overwritten in each iteration.
  At the moment I fail to push these objects, being created in each iteration into an array.</p>
  
  <p>I thought of something like this, but it does not work:</p>
  
  <pre><code>var inner = {}
              inner["x"] ;
              inner["y"] ;
  var outer = [];
  
          dats.forEach(function(d,i) {
              inner["x"] = i
              inner["y"] = dats[i].apples;
              outer.push(inner);
          });
  </code></pre>