Cómo pasar una matriz al atributo jQuery .data ()

86

Ok, entonces quiero pasar una matriz muy básica en un lado del servidor attrubute de datos jquery así:

<div data-stuff="['a','b','c']"></div>

y luego retroceder así:

var stuff = $('div').data('stuff');

alert(stuff[0]);

¿Por qué esto parece alertar a '[' y no a 'a' (ver enlace JSfiddle)

Enlace JSFiddle: http://jsfiddle.net/ktw4v/3/

— wilsonpage
fuente

144

Está tratando su variable como una cadena, cuyo elemento cero es [.

Esto sucede porque su cadena no es JSON válido , que debe usar comillas dobles como delimitador de cadena en lugar de comillas simples. Luego, deberá utilizar comillas simples para delimitar todo el valor del atributo.

Si corrige las comillas, su código original funciona (consulte http://jsfiddle.net/ktw4v/12/ )

<div data-stuff='["a","b","c"]'> </div>

var stuff = $('div').data('stuff');

Cuando jQuery ve JSON válido en un atributo de datos, lo descomprimirá automáticamente por usted .

— Alnitak
fuente

5

de hecho, ['a', 'b', 'c'] NO es un JSON válido;)

— stecb

2

['a', 'b', 'c'] no es JSON válido

— Mutt

¿Cómo debería verse el JSON?

— wilsonpage

5

Debería usar comillas dobles, pero luego tendría que usar comillas simples para encerrar el atributo HTML.

— Alnitak

1

@JoeBrockhaus son ambos delimitadores: las comillas son "delimitadores de cadena" y las comas son "delimitadores de registro". Solo los primeros son relevantes para la pregunta del PO.

— Alnitak

15

Declararlo como atributo significa que es una cadena.

Entonces stuff[0]sería equivalente a:var myString = "['a','b','c']"; alert(myString[0]);

Necesitas que se vea así:

<div data-stuff="a,b,c"></div>

var stuff = $('div').data('stuff').split(',');
alert(stuff[0]);

Retracción: el análisis de jQuery falla porque no cumplió con las reglas de parseJSON.

Sin embargo, respaldaré mi solución. Hay aspectos de los demás que son menos que ideales, así como esta solución es menos que ideal en algunos aspectos. Todo depende de cuáles sean tus paradigmas.

— John Green
fuente

4

no, declararlo como JSON no válido significa que se trata como una cadena.

— Alnitak

@Alnitak: aunque esa puede ser la forma en que jQuery lo trata, no veo eso en la referencia de jQuery Api, y ciertamente no está claro en la especificación w3c. Como definir JSON en un objeto dom rompería la 'neutralidad' de w3c, esto parece ser una extensión de jQuery o, dada la falta de documentación, una peculiaridad. En cualquier caso, aunque no puedo decir que esté de acuerdo contigo en este punto, no estoy tan molesto por eliminar el primer +1 que obtuviste. :)

— John Green

@John está documentado en la API de jQuery: "Se hace todo lo posible para convertir la cadena a un valor de JavaScript (esto incluye booleanos, números, objetos, matrices y nulos); de lo contrario, se deja como una cadena".

— Alnitak

@Alnitak Entonces estoy drogado, porque leí prácticamente toda la sección de datos y muchos de los comentarios antes de publicar. Solo miré de nuevo incluso.

— John Green

@Alnitak ok, lo encontré en tu edición. Sí, esta es una extensión de Jquery. Enmendaré mi publicación.

— John Green

-2

Como otros han identificado, el valor se trata como una cadena, por lo que devuelve "[". Por favor intente esto (aaa es el nombre del div y saqué los datos):

$(function(){
    $.data($("#aaa")[0],"stuff",{"aa":['a','b','c']});
    var stuff = $.data($("#aaa")[0],"stuff").aa;
    alert(stuff[0]); //returns "a"
});

— Raja
fuente

-4

Un enfoque diferente se publica en jsfiddle ; var stuff = $('div').data('stuff');cosas es una cadena con el carácter 0 como '['

Bueno, var stuff = eval($('div').data('stuff'));debería conseguirte una matriz

— Mayank
fuente

3

eval is evil :) siempre hay una manera mejor

— BYTE RIDER

Ajuste su respuesta para decir que, aunque es una posible solución, eval () podría hacer que los unicornios mueran ... stackoverflow.com/questions/86513/…

— Just Plain High