JQuery Объединить атрибуты данных

Question

Я пытаюсь объединить два атрибуты данных при нажатии на кнопку, и я задаюсь вопросом, как я могу объединить их в один вместо добавления строки перед первым,

HTML

<div id="parent"> 
    <button class="first" data-first='{"id":"1"}'>Test</button> 
    <button class="second" data-second='{"action":"0"}'>Test</button> 
</div> 

Я хочу объединить data-first с data-second при нажатии на кнопку с .first

JQuery

$('.parent').on('click', '.first', function() { 

    var old = $('.second').attr('data-object'); 

    var add = $(this).attr('data-object'); 

    $('.second').attr('data-object', add+old); 

}); 

Но это возвращает

data-second="{"id":"1"}{"action":"0"}" 

И то, что я ищу это

data-second="{"action":"0","id":"1"}" 

Любая помощь будет очень высоко ценится.

Answer 1

$('.second').data('object', $.extend({}, add, old)); 

http://api.jquery.com/jQuery.extend/

Существует удобный способ иметь дело с data- атрибутов в JQuery доступных: http://api.jquery.com/data/

Демо: http://jsfiddle.net/CqrwF/