Сохранить объект JSON в атрибуте данных в HTML jQuery

Question

Я храню данные с использованием подхода data- в теге HTML, например:

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

Затем я получаю данные в обратном вызове следующим образом:

$(this).data('imagename');

Это прекрасно работает. Я застрял в попытке сохранить объект, а не только одно из его свойств. Я пытался сделать это:

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

Затем я попытался получить доступ к свойству name следующим образом:

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

Журнал говорит мне undefined. Похоже, я могу хранить простые строки в атрибутах data-, но не могу хранить объекты JSON ...

Я также пытался использовать этого ребенка с синтаксисом без удачи:

<div data-foobar='{"foo":"bar"}'></div>

Есть идеи, как сохранить фактический объект в теге HTML с использованием подхода data-?

Answer 1

По какой-то причине принятый ответ сработал для меня, только если его использовали один раз на странице, но в моем случае я пытался сохранить данные по многим элементам на странице, и данные каким-то образом были потеряны на всех элементах, кроме первого. .

В качестве альтернативы я закончил записывать данные в dom и анализировать их при необходимости. Возможно, это менее эффективно, но хорошо сработало для моих целей, потому что я действительно создаю прототипы данных, а не пишу их для производства.

Чтобы сохранить данные, которые я использовал:

$('#myElement').attr('data-key', JSON.stringify(jsonObject));

Чтобы затем прочитать данные обратно, то же самое, что принятый ответ, а именно:

var getBackMyJSON = $('#myElement').data('key');

При таком способе данные также появлялись в домене, если бы я проверял элемент с помощью отладчика Chrome.

Answer 2

Использование документированного синтаксиса jquery .data (obj) позволяет хранить объект в элементе DOM. Проверка элемента не покажет атрибут data-, поскольку для значения объекта не указан ключ. Однако на данные внутри объекта можно ссылаться с помощью ключа .data("foo") или весь объект можно вернуть с помощью .data().

Итак, если вы настроили цикл и result[i] = { name: "image_name" }:

$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
$('.delete')[i].data('name'); // => "image_name"
$('.delete')[i].data(); // => { name: "image_name" }