it-swarm-pt.tech

Armazenar objeto JSON no atributo de dados em HTML jQuery

Estou armazenando dados usando a abordagem data- em uma tag HTML da seguinte forma:

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

Então, eu estou recuperando os dados em um retorno de chamada como este:

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

Isso funciona bem. O que eu estou preso é tentar salvar o objeto em vez de apenas uma das propriedades dele. Eu tentei fazer isso:

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

Então eu tentei acessar a propriedade name assim:

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

O log me diz undefined. Por isso, parece que posso armazenar strings simples nos atributos data-, mas não consigo armazenar objetos JSON ...

Eu também tentei usar esse garoto de sintaxe sem sorte:

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

Alguma idéia de como armazenar um objeto real na tag HTML usando a abordagem data-?

113
zumzum

em vez de incorporar no texto, use apenas $('#myElement').data('key',jsonObject);

ele não será realmente armazenado no html, mas se você estiver usando jquery.data, tudo o que é abstraído de qualquer maneira.

Para recuperar o JSON não analise , apenas chame:

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

Se você estiver obtendo [Object Object] em vez de JSON direto, basta acessar seu JSON pela chave de dados:

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

Na verdade, seu último exemplo:

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

parece estar funcionando bem (veja http://jsfiddle.net/GlauberRocha/Q6kKU/ ).

O bom é que a string no atributo data é convertida automaticamente em um objeto JavaScript. Eu não vejo nenhuma desvantagem nessa abordagem, pelo contrário! Um atributo é suficiente para armazenar um conjunto inteiro de dados, prontos para uso em JavaScript por meio das propriedades do objeto.

(Nota: para os atributos de dados receberem automaticamente o tipo Object em vez de String, você deve ter o cuidado de escrever JSON válido, em particular para colocar os nomes de chaves entre aspas duplas).

131

Foi assim que funcionou para mim.

Object

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

Set

Codifique o objeto stringificado com encodeURIComponent () e defina como atributo: 

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

Pegue

Para obter o valor como um objeto, analise o decodificado com o valor do atributo decodeURIComponent () ,: 

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

Para mim funciona assim, como eu preciso armazená-lo em template ...

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

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

Muitos problemas com o armazenamento de dados serializados podem ser resolvidos com a conversão de string serializada para base64

Uma string de base64 pode ser aceita em qualquer lugar sem problemas. 

Dê uma olhada:

O método WindowOrWorkerGlobalScope.btoa() cria uma string ASCII codificada na base 64 a partir de um objeto String no qual cada caractere na string É tratado como um byte de dados binários.

A função WindowOrWorkerGlobalScope.atob()decode uma string de dados Que foi codificada usando a codificação base-64.

Converta para/de conforme necessário. 

6
Dan

O truque para mim era adicionar aspas duplas em torno de chaves e valores. Se você usar uma função php como json_encode, você terá uma string codificada json e uma idéia de como codificá-la. 

jQuery ('# Elm-id'). data ('datakey') retornará um objeto da string, se a string estiver corretamente codificada como json.

De acordo com a documentação do jQuery: ( http://api.jquery.com/jquery.parsejson/ )

Passar em uma string JSON malformada resulta em uma exceção JavaScript sendo lançada. Por exemplo, as seguintes são todas strings JSON inválidas:

  1. "{test: 1}" (o teste não possui aspas duplas em torno dele).
  2. "{'test': 1}" ('test' está usando aspas simples em vez de aspas duplas).
  3. "'teste'" ('teste' está usando aspas simples em vez de aspas duplas).
  4. ".1" (um número deve começar com um dígito; "0,1" seria válido).
  5. "undefined" (undefined não pode ser representado em uma string JSON; null, no entanto, pode ser).
  6. "NaN" (NaN não pode ser representado em uma string JSON; a representação direta do Infinity também é n
3
George Donev

.data() funciona perfeitamente na maioria dos casos. A única vez que tive um problema foi quando o próprio string JSON tinha uma aspa simples. Eu não consegui encontrar nenhuma maneira fácil de superar isso, então recorri a essa abordagem (estou usando o Coldfusion como linguagem de servidor):

    <!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>
0
Sajjan Sarkar

Para o registro, eu encontrei o código a seguir funciona. Ele permite recuperar a matriz da tag de dados, inserir um novo elemento e armazená-lo de volta na tag de dados no formato JSON correto. O mesmo código pode, portanto, ser usado novamente para adicionar outros elementos à matriz, se desejado. Descobri que $('#my-data-div').attr('data-namesarray', names_string); armazena corretamente a matriz, mas $('#my-data-div').data('namesarray', names_string); não funciona.

<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);
0
Bazley

Usando a sintaxe documentada jquery .data (obj) permite que você armazene um objeto no elemento DOM. Inspecionar o elemento não mostrará o atributo data- porque não há chave especificada para o valor do objeto. No entanto, os dados dentro do objeto podem ser referenciados pela chave com .data("foo") ou o objeto inteiro pode ser retornado com .data().

Então, supondo que você configure um loop e 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" }
0
user2069751

Por alguma razão, a resposta aceita funcionou para mim somente se fosse usada uma vez na página, mas no meu caso eu estava tentando salvar dados em muitos elementos na página e os dados eram de alguma forma perdidos em todos, exceto no primeiro elemento.

Como alternativa, acabei escrevendo os dados para o dom e analisando-os quando necessário. Talvez seja menos eficiente, mas funcionou bem para o meu propósito, porque estou realmente prototipando dados e não escrevendo isso para produção. 

Para salvar os dados que usei:

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

Em seguida, ler os dados de volta é o mesmo que a resposta aceita, a saber:

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

Fazê-lo desta forma também fez com que os dados aparecessem no dom se eu fosse inspecionar o elemento com o depurador do Chrome.

0
Shane E.

Este código está funcionando bem para mim. 

Codificar dados com btoa

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

E depois decodificá-lo com atob

let tourData = $(this).data("json");
tourData = atob(tourData);
0
Hp Sharma
!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...
0
Vishal Patel