Jak przekazać tablicę do atrybutu jQuery .data ()

86

Ok, więc chcę przekazać bardzo podstawową tablicę do strony serwera jQuery Data Attrubute w następujący sposób:

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

a potem wycofać się w ten sposób:

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

alert(stuff[0]);

Dlaczego wydaje się, że to ostrzega „[” a nie „a” (patrz link JSfiddle)

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

javascript jquery html json wilsonpage
źródło

Odpowiedzi:

144

Traktuje zmienną jako łańcuch, którego zerowym elementem jest [.

Dzieje się tak, ponieważ Twój ciąg nie jest prawidłowym formatem JSON , który powinien używać podwójnych cudzysłowów jako separatora ciągu zamiast pojedynczych cudzysłowów. Będziesz wtedy musiał użyć pojedynczych cudzysłowów, aby oddzielić całą wartość atrybutu.

Jeśli poprawisz cudzysłowy, oryginalny kod działa (patrz http://jsfiddle.net/ktw4v/12/ )

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

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

Kiedy jQuery widzi prawidłowy JSON w atrybucie danych, automatycznie rozpakuje go .

Alnitak
źródło
5
w rzeczywistości, ['a', 'b', 'c'] NIE jest prawidłowym JSON;)
stecb
2
[„a”, „b”, „c”] nie jest prawidłowe. JSON
Mutt
Jak powinien wyglądać JSON?
wilsonpage
5
Powinien używać podwójnych cudzysłowów, ale wtedy musiałbyś użyć pojedynczych cudzysłowów, aby ująć atrybut HTML.
Alnitak
1
@JoeBrockhaus oba są ogranicznikami - cudzysłowy to „separatory ciągów”, a przecinki to „separatory rekordów”. Tylko te pierwsze odnoszą się do pytania PO.
Alnitak
15

Zadeklarowanie go jako atrybutu oznacza, że ​​jest to ciąg.

Więc stuff[0]byłoby równoważne z:var myString = "['a','b','c']"; alert(myString[0]);

Musisz, aby wyglądało to tak:

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

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

Wycofanie: parsowanie jQuery nie powiodło się, ponieważ nie spełniało reguł parseJSON.

Jednak będę opowiadał się za moim rozwiązaniem. Są aspekty innych, które są mniej niż idealne, tak jak to rozwiązanie jest pod pewnymi względami mniej niż idealne. Wszystko zależy od tego, jakie są Twoje paradygmaty.

John Green
źródło
4
nie, zadeklarowanie go jako nieprawidłowego JSON oznacza, że ​​jest traktowany jako ciąg.
Alnitak
@Alnitak - Chociaż może to być sposób, w jaki traktuje to jQuery - nie widzę tego w odwołaniu do jQuery Api, a na pewno nie jest to jasne w specyfikacji w3c. Ponieważ zdefiniowanie JSON w obiekcie dom złamałoby „neutralność” w3c, wydaje się, że jest to rozszerzenie jQuery lub, biorąc pod uwagę brak dokumentacji - dziwactwo. W każdym razie, chociaż nie mogę powiedzieć, że zgadzam się z tobą w tej kwestii - nie jestem tak zirytowany, że usunę pierwsze +1, które otrzymałeś. :)
John Green
@John, jest to udokumentowane w API jQuery - „ Podejmowana jest każda próba konwersji ciągu na wartość JavaScript (obejmuje to wartości logiczne, liczby, obiekty, tablice i wartość null), w przeciwnym razie pozostaje jako ciąg”.
Alnitak
@Alnitak Jestem na haju, ponieważ przed wysłaniem przeczytałem prawie całą sekcję danych i wiele komentarzy. Po prostu znów wyglądałem równo.
John Green
@Alnitak ok, znalazłem to z twojej edycji. Tak, to jest rozszerzenie Jquery. Poprawię mój post.
John Green
-2

Ponieważ inni zidentyfikowali, wartość jest traktowana jako łańcuch, więc zwraca „[”. Spróbuj tego (aaa to nazwa div, a ja wyjąłem dane):

$(function(){
    $.data($("#aaa")[0],"stuff",{"aa":['a','b','c']});
    var stuff = $.data($("#aaa")[0],"stuff").aa;
    alert(stuff[0]); //returns "a"
});
Radża
źródło
-4

Inne podejście jest opublikowane na jsfiddle ; var stuff = $('div').data('stuff');stuff to łańcuch z zerowym znakiem jako „[”

Cóż, var stuff = eval($('div').data('stuff'));powinno Ci tablicę

Mayank
źródło
3
eval jest zły :) zawsze jest lepszy sposób
BYTE RIDER
Dostosuj swoją odpowiedź, aby stwierdzić, że eval () może spowodować śmierć jednorożców, mimo że jest to możliwe rozwiązanie ... stackoverflow.com/questions/86513/…
Just Plain High