Como passar um array para o atributo jQuery .data ()

86

Ok, então eu quero passar uma matriz muito básica para um servidor de atributo de dados jquery assim:

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

e depois recuperar assim:

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

alert(stuff[0]);

Por que isso parece alertar '[' e não 'a' (consulte o link JSfiddle)

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

— wilsonpage
fonte

144

Trata-se de tratar sua variável como uma string, cujo elemento zero é [.

Isso está acontecendo porque sua string não é um JSON válido , que deve usar aspas duplas como delimitador de string em vez de aspas simples. Em seguida, você terá que usar aspas simples para delimitar todo o valor do atributo.

Se você corrigir as aspas, seu código original funcionará (consulte http://jsfiddle.net/ktw4v/12/ )

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

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

Quando o jQuery vê um JSON válido em um atributo de dados, ele o descompacta automaticamente para você .

— Alnitak
fonte

5

infact, ['a', 'b', 'c'] NÃO é um JSON válido;)

— stecb

2

['a', 'b', 'c'] não é JSON válido

— Mutt

Qual deve ser a aparência do JSON?

— wilsonpage de

5

Deve usar aspas duplas, mas você teria que usar aspas simples para incluir o atributo HTML.

— Alnitak de

1

@JoeBrockhaus são ambos delimitadores - as aspas são "delimitadores de string" e as vírgulas são "delimitadores de registro". Apenas os primeiros são relevantes para a pergunta do OP.

— Alnitak

15

Declará-lo como um atributo significa que é uma string.

Então stuff[0]seria equivalente a:var myString = "['a','b','c']"; alert(myString[0]);

Você precisa fazer com que tenha a seguinte aparência:

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

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

Retração: a análise do jQuery falha porque não atendeu às regras de parseJSON.

No entanto, apoiarei minha solução. Existem aspectos dos outros que são menos do que ideais, assim como essa solução é menos do que ideal em alguns aspectos. Tudo depende de quais são seus paradigmas.

— John Green
fonte

4

não, declará-lo como JSON inválido significa que ele é tratado como uma string.

— Alnitak

@Alnitak - Embora essa possa muito bem ser a forma como o jQuery o trata - não vejo isso na referência da Api do jQuery, e certamente não está claro nas especificações w3c. Como definir JSON em um objeto dom quebraria a 'neutralidade' do w3c, isso parece ser uma extensão do jQuery ou, dada a falta de documentação - peculiaridade. De qualquer forma, embora eu não possa dizer que concordo com você neste ponto - não estou tão irritado a ponto de remover aquele primeiro +1 que você recebeu. :)

— John Green

@John está documentado na API jQuery - "Todas as tentativas são feitas para converter a string em um valor JavaScript (isso inclui booleanos, números, objetos, arrays e nulos), caso contrário, é deixado como uma string."

— Alnitak

@Alnitak Então estou alto, porque li praticamente toda a seção de dados e muitos dos comentários antes de postar. Eu apenas olhei de novo mesmo.

— John Green

@Alnitak ok, encontrei na sua edição. Sim, esta é uma extensão Jquery. Vou emendar minha postagem.

— John Green

-2

Como outros identificaram, o valor é tratado como string, portanto, retorna "[". Por favor, tente isto (aaa é o nome do div e eu tirei o material de dados):

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

— Rajá
fonte

-4

Uma abordagem diferente é postada em jsfiddle ; var stuff = $('div').data('stuff');stuff é uma string com 0º caractere como '['

Bem, var stuff = eval($('div').data('stuff'));você deve obter uma matriz

— Mayank
fonte

3

eval é mau :) há sempre uma maneira melhor

— BYTE RIDER

Ajuste sua resposta para dizer que, embora seja uma solução possível, eval () pode causar a morte de unicórnios ... stackoverflow.com/questions/86513/…

— Just Plain High