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

Ответ 1

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

на самом деле он не будет храниться в html, но если вы используете jquery.data, все это абстрагируется в любом случае.

Чтобы вернуть JSON назад не анализировать его, просто позвоните:

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

atob()
btoa()

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

Ответ 5

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

Чтобы сохранить JSON в атрибуте данных HTML, объект Stringy 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));

Ответ 6

Используя документированный синтаксис 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" }

Ответ 7

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

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

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

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

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

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

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

Ответ 8

.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 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>

Ответ 9

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

Ответ 10

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

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

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

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

• "{test: 1}" (у него нет двойных кавычек).
• "{'test': 1}" ('test' использует одинарные кавычки вместо двойных кавычек).
• "'test'" ('test' использует одинарные кавычки вместо двойных кавычек).
• ". 1" (число должно начинаться с цифры, "0,1" будет действительным).
• "undefined" (undefined не может быть представлен в строке JSON, но null может быть).
• "NaN" (NaN не может быть представлен в строке JSON, прямое представление Infinity также равно n