Сохранить объект 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

На самом деле ваш последний пример:

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

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

Объект

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

Set

Кодировать строковый объектс помощью 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));

Answer 4

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

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

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

Answer 5

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

Строка base64 может быть принята практически в любом месте без суеты.

Взгляните на:

• btoa ()

Метод WindowOrWorkerGlobalScope.btoa() создает кодировку base-64 Строка ASCII из объекта String, в котором каждый символ в строка обрабатывается как байт двоичных данных.

• atob ()

Функция WindowOrWorkerGlobalScope.atob() декодирует строку данных который был закодирован с использованием кодировки base-64.

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

Answer 6

Трюк для меня заключался в добавлении двойных кавычек вокруг ключей и значений . Если вы используете функцию 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}" («test» использует одинарные кавычки вместо двойных кавычек).
3. "'test'" ("test" использует одинарные кавычки вместо двойных).
4. ". 1" (число должно начинаться с цифры; "0,1" будет действительным).
5. "undefined" (undefined не может быть представлен в строке JSON; однако, null может быть).
6. "NaN" (NaN не может быть представлен в строке JSON; прямое представление Infinity также n

Answer 7

Этот код работает нормально для меня.

Кодирование данных с помощью btoa

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

А затем расшифруйте его с помощью atob

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

Answer 8

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

Answer 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);

Answer 10

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