Question

How can I push an object into a jquery data() object that is an array. I want to end up with the data property numbers 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.

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

$('#div1').data('values', {'one' : 'UNO', 'two' : 'DUE'});
console.log($('#div1').data('values'))

and Chrome would give me a little expandable object to look at. Now I just see [object Object] I can still see them if I do

console.log($('#div1').data('values').one).

But that seems a little more inconvenient if I don’t know exactly what’s in the data() object. It would be useful for checking to see how close I am to achieving this.

Once I assign all my data to their respective objects,

$(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'});
}); 

how can I loop through these objects (all with a shared class add) and put the objects they contain in data.values into another data() object? Here I’m trying to do it on the body‘s data object, numbers:

  `$('body').data('numbers', []);`

so that

$('body').data('numbers') =

['div1': {
    'one': 'UNO',
    'two': 'DUE'
},
'div2': {
    'three': 'TRE',
    'four': 'QUATTRO'
},
'div3': {
    'five': 'CINQUE',
    'six': 'SEI'
},
'div4': {
    'seven': 'SETTE',
    'eight': 'OTTO'
}]

my attempt has failed:

    $('.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
     });

jsbin

Answer 1

JavaScript does not have associative arrays so you have to use an Object. Then use bracket notation for the property (key) names:

var values = {};
$('.add').each(function (index, element) {
    values[element.id] = $(element).data('values');
});
$('body').data('numbers', values);

jsBin

About your [object Object], you may be accidentally doing string concatenation with the object before outputting it to the console, else it is a bug in your Chrome console.

Using an array you can use .push to push items onto the end of the array:

var values = [];
$('.add').each(function (index, element) {
    values.push( $(element).data('values') );
});

Bin

After having the array initialized and stored inside the element’s .data(), you can later push items into it by simply grabbing a reference to the Array object and calling .push() on it:

var values = [];
$('.add').each(function (index, element) {
    values.push( $(element).data('values') );
});
$('body').data('numbers', values);

$('body').data('numbers').push({'nueve': 'nine'});
//logs "nueve" too as Array/Objects/Functions are passed by reference and the
//previous command pushed an item into the Array object referenced ("stored")
//in the $('body').data('numbers')
console.log( $('body').data('numbers') );

Bin