Перебирать объекты jquery data() и помещать их в другой объект data () (массив)

Question

Как я могу вставить объект в JQuery data() Объект, который является массивом. Я хочу получить свойство данных numbers содержащий массив объектов, которые я получаю, просматривая некоторые HTML определенного класса. Я не понимаю, как я могу вставить каждый объект в массив.

Мой первый вопрос: если у меня есть некоторые данные в объекте, как я могу посмотреть на весь объект. Кажется, что раньше я мог сделать

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

и Chrome дал бы мне немного расширяемый объект для просмотра. Теперь я просто вижу [object Object] Я все еще могу видеть их, если я делаю

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

Но это кажется немного более неудобным, если я не знаю точно, что в data() объект. Было бы полезно проверить, насколько я близок к достижению этого.

Как только я назначу все свои данные их соответствующим объектам,

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

как я могу пройти через эти объекты (все с общим классом add) и положить объекты, которые они содержат в data.values в другой data() объект? Здесь я пытаюсь сделать это на bodyобъект данных, numbers:

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

чтобы

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

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

моя попытка не удалась:

    $('.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 нет ассоциативных массивов, поэтому вы должны использовать объект. Затем используйте скобочные обозначения для имен свойств (ключей):

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

jsBin

О тебе [object Object] вы можете случайно выполнить конкатенацию строк с объектом перед выводом его на консоль, иначе это ошибка в вашей консоли Chrome.

Используя массив вы можете использовать .push чтобы поместить элементы в конец массива:

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

мусорное ведро

После инициализации массива и сохранения внутри элемента .data() позже вы можете помещать в него элементы, просто захватывая ссылку на объект Array и вызывая .push() в теме:

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') );

мусорное ведро