objeto - obtener atributo jquery

Almacene el objeto JSON en el atributo de datos en HTML jQuery

Question

Estoy almacenando datos usando el enfoque de data- en una etiqueta HTML como esta:

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

Entonces estoy recuperando los datos en una devolución de llamada como esta:

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

Eso funciona bien A lo que me ato es a tratar de guardar el objeto en lugar de solo una de sus propiedades. Traté de hacer esto:

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

Entonces traté de acceder a la propiedad del nombre de esta manera:

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

El registro me dice undefined . Entonces parece que puedo almacenar cadenas simples en los atributos de data- pero no puedo almacenar objetos JSON ...

También traté de usar este niño de sintaxis sin suerte:

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

¿Alguna idea sobre cómo almacenar un objeto real en la etiqueta HTML usando el enfoque de data- ?

Answer 1

Así es como funcionó para mí.

Para guardar un JSON en el atributo de datos HTML, Stringy JSON objeto y codificarlo con el método "encodeURIComponent ()".

Mientras lee los datos, decodifíquelos con el método "decodeURIComponent ()" y analice la cadena al objeto JSON.

Ejemplo:

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

Guardar datos:

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

Lectura de datos:

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

Answer 2

El truco para mí fue agregar comillas dobles alrededor de las claves y los valores . Si usas una función php como json_encode, obtendrás una cadena codificada json y una idea de cómo codificar correctamente la tuya.

jQuery (''# elm-id''). data (''datakey'') devolverá un objeto de la cadena, si la cadena está adecuadamente codificada como json.

Según la documentación de jQuery: ( http://api.jquery.com/jquery.parsejson/ )

Al pasar una cadena JSON malformada, se genera una excepción de JavaScript. Por ejemplo, las siguientes son cadenas JSON no válidas:

1. "{test: 1}" (la prueba no tiene comillas dobles).
2. "{''test'': 1}" (''test'' usa comillas simples en lugar de comillas dobles).
3. "''test''" (''test'' usa comillas simples en lugar de comillas dobles).
4. ".1" (un número debe comenzar con un dígito, "0.1" sería válido).
5. "indefinido" (indefinido no se puede representar en una cadena JSON, nulo, sin embargo, puede ser).
6. "NaN" (NaN no se puede representar en una cadena JSON; la representación directa de Infinity también es n

Answer 3

El uso de la sintaxis jquery .data (obj) documentada le permite almacenar un objeto en el elemento DOM. La inspección del elemento no mostrará el atributo de data- porque no hay una clave especificada para el valor del objeto. Sin embargo, los datos dentro del objeto se pueden referenciar por clave con .data("foo") o el objeto completo se puede devolver con .data() .

Asumiendo que configure un ciclo y 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" }

Answer 4

En realidad, tu último ejemplo:

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

parece estar funcionando bien (ver http://jsfiddle.net/GlauberRocha/Q6kKU/ ).

Lo bueno es que la cadena en el atributo de datos se convierte automáticamente en un objeto de JavaScript. No veo ningún inconveniente en este enfoque, ¡al contrario! Un atributo es suficiente para almacenar un conjunto completo de datos, listos para usar en JavaScript a través de las propiedades de los objetos.

(Nota: para que los atributos de datos tengan automáticamente el tipo Objeto en lugar de Cadena, debe tener cuidado de escribir JSON válido, en particular para incluir los nombres de las teclas entre comillas dobles).

Answer 5

Para el registro, encontré que el siguiente código funciona. Le permite recuperar la matriz de la etiqueta de datos, insertar un nuevo elemento y almacenarla nuevamente en la etiqueta de datos en el formato JSON correcto. Por lo tanto, el mismo código se puede usar nuevamente para agregar más elementos a la matriz si así lo desea. Encontré ese $(''#my-data-div'').attr(''data-namesarray'', names_string); almacena correctamente la matriz, pero $(''#my-data-div'').data(''namesarray'', names_string); no 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);

Answer 6

Para mí funciona así, ya que necesito almacenarlo en plantilla ...

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

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

Answer 7

Por alguna razón, la respuesta aceptada funcionó solo para mí si se usaba una vez en la página, pero en mi caso yo estaba tratando de guardar datos en muchos elementos en la página y los datos de alguna manera se perdieron en todos, excepto en el primer elemento.

Como alternativa, terminé escribiendo los datos en el dom y analizándolo cuando era necesario. Tal vez sea menos eficiente, pero funcionó bien para mi propósito porque realmente estoy creando prototipos de datos y no escribiendo esto para producción.

Para guardar los datos que utilicé:

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

Para luego leer la información de vuelta es la misma que la respuesta aceptada, a saber:

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

Hacerlo de esta manera también hizo que los datos aparecieran en el dom si fuera a inspeccionar el elemento con el depurador de Chrome.

Answer 8

Se pueden resolver muchos problemas con el almacenamiento de datos serializados convirtiendo la cadena serializada a base64. Una cadena base64 se puede aceptar casi en cualquier lugar sin problemas. Echa un vistazo a:

atob()
btoa()

Convierta a / desde según sea necesario.

Answer 9

en lugar de incrustarlo en el texto, simplemente use $(''#myElement'').data(''key'',jsonObject);

en realidad no se almacenará en el html, pero si está utilizando jquery.data, todo eso se abstrae de todos modos.

Para recuperar el JSON , no lo analice , simplemente llame:

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

Si obtiene [Object Object] lugar de JSON directo, solo acceda a su JSON con la clave de datos:

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

Answer 10

.data() funciona perfectamente para la mayoría de los casos. La única vez que tuve un problema fue cuando la cadena JSON tenía una comilla simple. No pude encontrar ninguna manera fácil de superar esto, así que recurrí a este enfoque (estoy usando Coldfusion como lenguaje 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>