title: iterate through jquery data() objects and push them into another data() object (array)
body: <p>How can I push an object into a jquery <code>data()</code> object that is an array. I want to end up with the data property <code>numbers</code> containing an array of objects, that I acquire by looping through some html of a particular class. I don't understand how I can push each object into the array. </p>
  
  <p>My first question is, if I have some data in an object, how can I look at the whole object. It seems like it used to be that I could do </p>
  
  <p><code>$('#div1').data('values', {'one' : 'UNO', 'two' : 'DUE'});</code>
   <code>console.log($('#div1').data('values'))</code> </p>
  
  <p>and Chrome would give me a little expandable object to look at. Now I just see <code>[object Object]</code> I can still see them if I do</p>
  
  <p><code>console.log($('#div1').data('values').one)</code>.</p>
  
  <p>But that seems a little more inconvenient if I don't know exactly what's in the <code>data()</code> object. It would be useful for checking to see how close I am to achieving this.</p>
  
  <p>Once I assign all my data to their respective objects,</p>
  
  <pre><code>$(document).ready(function(){
    $('#div1').data('values', {'one' : 'UNO', 'two' : 'DUE'});
    $('#div2').data('values', {'three' : 'TRE', 'four' : 'QUATTRO'});
    $('#div3').data('values', {'five' : 'CINQUE', 'six' : 'SEI'});
    $('#div4').data('values', {'seven' : 'SETTE', 'eight' : 'OTTO'});
  }); 
  </code></pre>
  
  <p>how can I loop through these objects (all with a shared class <code>add</code>) and put the objects they contain in <code>data.values</code> into another <code>data()</code> object? Here I'm trying to do it on the <code>body</code>'s data object, <code>numbers</code>:</p>
  
  <pre><code>  `$('body').data('numbers', []);`
  </code></pre>
  
  <p>so that </p>
  
  <pre><code>$('body').data('numbers') =
  
  ['div1': {
      'one': 'UNO',
      'two': 'DUE'
  },
  'div2': {
      'three': 'TRE',
      'four': 'QUATTRO'
  },
  'div3': {
      'five': 'CINQUE',
      'six': 'SEI'
  },
  'div4': {
      'seven': 'SETTE',
      'eight': 'OTTO'
  }]
  </code></pre>
  
  <p>my attempt has failed:</p>
  
  <pre><code>    $('.add').each(function (index, element) {
          $('body').data(numbers, {
              element.attr('id'): element.data('values')
          //could not understand how to use push here, though it seems likely that's the answer
       });
  </code></pre>
  
  <p><a href="http://jsbin.com/ababoy/2/edit" rel="nofollow">jsbin</a></p>