Зберігайте об’єкт JSON в атрибуті даних у HTML jQuery

Я зберігаю дані за допомогою 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>

Тоді я спробував отримати доступ до властивості імені так:

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

Журнал мені підказує undefined. Тож здається, що я можу зберігати прості рядки в data-атрибутах, але я не можу зберігати об’єкти JSON ...

Я також намагався невдало використовувати цю дитину синтаксису:

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

Будь-яка ідея, як зберігати фактичний об’єкт у тезі HTML, використовуючи data-підхід?

замість того, щоб вбудовувати його в текст, просто використовуйте $('#myElement').data('key',jsonObject);

він насправді не зберігатиметься в html, але якщо ви використовуєте jquery.data, все, що все-таки абстрагується.

Щоб повернути JSON , не розбирайте його , просто зателефонуйте:

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

Якщо ви отримуєте [Object Object]замість прямого JSON, просто перейдіть до свого JSON за допомогою ключа даних:

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

Власне, ваш останній приклад:

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

здається, працює добре (див. http://jsfiddle.net/GlauberRocha/Q6kKU/ ).

Приємно те, що рядок у атрибуті data автоматично перетворюється на об’єкт JavaScript. Я не бачу жодного недоліку в такому підході, навпаки! Одного атрибуту достатньо для зберігання цілого набору даних, готових до використання в JavaScript через властивості об'єкта.

.

Ось як це працювало для мене.

Об'єкт

var my_object ={"Super Hero":["Iron Man", "Super Man"]};

Встановити

Зашифруйте об'єкт пошарпаного об'єкта encodeURIComponent () і встановіть як атрибут:

var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

Отримайте

Щоб отримати значення як об'єкт, проаналізуйте розшифроване, за допомогою decodeURIComponent () значення атрибута:

var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

Багато проблем зі збереженням серіалізованих даних можна вирішити шляхом перетворення серіалізованої рядки в base64 .

Рядок base64 можна приймати майже де завгодно, без суєти.

Подивись на:

• btoa ()

WindowOrWorkerGlobalScope.btoa()Метод створює базову 64 кодований ASCII рядок з строкового об'єкта , в якому кожен символ в рядку трактуються як байти двійкових даних.

• atob ()

WindowOrWorkerGlobalScope.atob()Функція декодує рядок даних , які були закодовані з використанням базових 64 кодування.

Перетворити на / із необхідності.

Для мене це працює так, як мені потрібно зберігати його в шаблоні ...

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

Трюком для мене було додати подвійні лапки навколо ключів та значень . Якщо ви використовуєте функцію PHP, як-от, json_encodeви дасте рядок, кодований JSON, та ідею, як правильно кодувати свою.

jQuery('#elm-id').data('datakey') поверне об'єкт рядка, якщо рядок правильно кодований як json.

Відповідно до документації jQuery: ( http://api.jquery.com/jquery.parsejson/ )

Передача в неправильно сформованому рядку JSON призводить до викидання виключення JavaScript. Наприклад, наведені нижче всі недійсні рядки JSON:

1. "{test: 1}"( testне має подвійних лапок навколо).
2. "{'test': 1}"( 'test'використовується одинарні лапки замість подвійних лапок).
3. "'test'"( 'test'використовується одинарні лапки замість подвійних лапок).
4. ".1"(число повинно починатися з цифри; "0.1"було б дійсним).
5. "undefined"( undefinedне може бути представлено у рядку JSON; nullпроте, може бути).
6. "NaN"( NaNне може бути представлений у рядку JSON; пряме подання Infinity також n

Поєднайте використання window.btoaта window.atobразом із JSON.stringifyта JSON.parse.

- Це працює для рядків, що містять одиничні лапки

Кодування даних:

var encodedObject = window.btoa(JSON.stringify(dataObject));

Розшифровка даних:

var dataObject = JSON.parse(window.atob(encodedObject));

Ось приклад того, як дані будуються та декодуються пізніше за допомогою події клацання.

Побудуйте html та кодуйте дані:

var encodedObject = window.btoa(JSON.stringify(dataObject));

"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>" 
+ "Edit</a></td>"

Розшифруйте дані в обробці подій клацання:

$("#someElementID").on('click', 'eventClass', function(e) {
            event.preventDefault();
            var encodedObject = e.target.attributes["data-topic"].value;
            var dataObject = JSON.parse(window.atob(encodedObject));

            // use the dataObject["keyName"] 
}

Використання задокументованого синтаксису 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" }

Чомусь прийнята відповідь працювала для мене лише в тому випадку, якщо її використовували один раз на сторінці, але в моєму випадку я намагався зберегти дані про багато елементів на сторінці, і дані були якимось чином втрачені на всіх, окрім першого елемента.

Як альтернатива, я закінчив записувати дані до дому та аналізувати їх, коли потрібно. Можливо, це менш ефективно, але добре працював за своїм призначенням, бо я справді прототипував дані і не пишу цього для виробництва.

Для збереження використаних даних:

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

Потім прочитати дані назад те саме, що прийнято відповідь, а саме:

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

Це робило це також, коли дані з'являлися у домі, якщо я хотів би перевірити елемент за допомогою налагоджувача Chrome.

.data()прекрасно працює в більшості випадків. Єдиний раз, коли у мене виникли проблеми, коли в рядку JSON сама була одна цитата. Я не міг знайти жодного легкого способу пройти це, настільки вдався до цього підходу (я використовую Coldfusion як мову сервера):

    <!DOCTYPE html>
        <html>
            <head>
                <title>
                    Special Chars in Data Attribute
                </title>
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script>
                    $(function(){
                        var o = $("##xxx");
                        /**
                            1. get the data attribute as a string using attr()
                            2. unescape
                            3. convert unescaped string back to object
                            4. set the original data attribute to future calls get it as JSON.
                        */
                        o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                        console.log(o.data("xxx")); // this is JSON object.
                    });
                </script>
                <title>
                    Title of the document
                </title>
            </head>
            <body>
                <cfset str = {name:"o'reilly's stuff",code:1}>
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
                <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
                </div>
            </body>
        </html>

Для запису я знайшов наступний код роботи. Це дає змогу отримати масив із тегу даних, натиснути новий елемент і зберегти його назад у тезі даних у правильному форматі JSON. Тому той самий код може бути використаний знову для додавання додаткових елементів до масиву, якщо потрібно. Я виявив, що $('#my-data-div').attr('data-namesarray', names_string);правильно зберігає масив, але $('#my-data-div').data('namesarray', names_string);не працює.

<div id="my-data-div" data-namesarray='[]'></div>

var names_array = $('#my-data-div').data('namesarray');
names_array.push("Baz Smith");
var names_string = JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray', names_string);

!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

});

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...

Цей код добре працює для мене.

Кодуйте дані за допомогою btoa

let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);

А потім розшифруйте його за допомогою атобу

let tourData = $(this).data("json");
tourData = atob(tourData);