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

собственно, ваш последний пример:

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

Кажется, работает хорошо (см. http://jsfiddle.net/GlauberRocha/Q6kKU/).

приятно, что строка в атрибуте данных автоматически преобразуется в объект JavaScript. Я не вижу никакого недостатка в таком подходе, наоборот! Одного атрибута достаточно для хранения целого набора данных, готовых к использованию в JavaScript через свойства объекта.

(Примечание: для данных- атрибуты, которые будут автоматически заданы объекту типа, а не строке, вы должны быть осторожны, чтобы написать допустимый JSON, в частности, чтобы заключить имена ключей в двойные кавычки).

вот как это работало для меня.

чтобы сохранить JSON в атрибуте данных HTML, строковый объект JSON и кодировать его с помощью метода " encodeURIComponent ()".

при чтении данных обратно, декодируйте его с помощью метода" decodeURIComponent () " и проанализируйте строку в объект JSON.

пример:

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

Сохранение Данных:

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

Чтение Данных:

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

для меня это работает так, как мне нужно сохранить его в шаблоне...

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

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

многие проблемы с хранением сериализованных данных могут быть решены путем преобразования сериализованной строки в base64. Строка base64 может быть принята практически в любом месте без суеты. Взгляните на:

atob()
btoa()

конвертировать в/Из по мере необходимости.

хитрость для меня заключалась в том, чтобы добавить двойные кавычки вокруг ключей и значений. Если вы используете php-функцию, такую как json_encode, она даст вам кодированную строку json и идею о том, как правильно кодировать вашу.

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

согласно документации jQuery: (http://api.jquery.com/jquery.parsejson/)

проходящий в поисковой искаженную строку JSON в JavaScript и исключение быть брошенным. Например, ниже приведены все недопустимые строки JSON:

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

С помощью документированный jquery .синтаксис данных(объект) позволяет хранить объект в элементе 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" }

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

для сохранения данных я использую:

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

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

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

выполнение этого способа также заставило данные появиться в dom, если я должен был проверить элемент с помощью отладчика 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);

а затем декодировать его с atob

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