Cara melewatkan array ke atribut jQuery .data ()

86

Ok jadi saya ingin meneruskan array yang sangat dasar ke sisi server jquery data attrubute seperti ini:

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

dan kemudian mundur seperti ini:

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

alert(stuff[0]);

Mengapa ini tampaknya mengingatkan '[' dan bukan 'a' (lihat tautan JSfiddle)

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

— wilsonpage
sumber

145

Ini memperlakukan variabel Anda sebagai string, elemen ke nolnya adalah [ .

Ini terjadi karena string Anda bukan JSON yang valid , yang seharusnya menggunakan tanda kutip ganda sebagai pemisah string, bukan tanda kutip tunggal. Anda kemudian harus menggunakan tanda kutip tunggal untuk membatasi seluruh nilai atribut.

Jika Anda memperbaiki tanda kutip Anda, kode asli Anda berfungsi (lihat http://jsfiddle.net/ktw4v/12/ )

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

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

Ketika jQuery melihat JSON yang valid dalam atribut data, maka secara otomatis akan mengekstraknya untuk Anda .

— Alnitak
sumber

5

infact, ['a', 'b', 'c'] BUKAN JSON yang valid;)

— stecb

2

['a', 'b', 'c'] bukan JSON yang valid

— Mutt

Seperti apa tampilan JSON?

— wilsonpage

5

Ini harus menggunakan tanda kutip ganda, tetapi kemudian Anda harus menggunakan tanda kutip tunggal untuk menyertakan atribut HTML.

— Alnitak

1

@JoeBrockhaus keduanya adalah pembatas - tanda kutip adalah "pembatas string" dan koma adalah "pembatas rekaman". Hanya yang pertama yang relevan dengan pertanyaan OP.

— Alnitak

15

Mendeklarasikannya sebagai atribut berarti itu adalah string.

Jadi stuff[0]akan setara dengan:var myString = "['a','b','c']"; alert(myString[0]);

Anda perlu membuatnya terlihat seperti ini:

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

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

Retraksi: penguraian jQuery gagal karena tidak memenuhi aturan parseJSON.

Namun, saya akan mendukung solusi saya. Ada aspek lain yang kurang ideal, sama seperti solusi ini kurang ideal dalam beberapa hal. Semua tergantung pada apa pola pikir Anda.

— John Green
sumber

4

tidak, mendeklarasikannya sebagai JSON yang tidak valid berarti itu diperlakukan sebagai string.

— Alnitak

@Alnitak - Meskipun itu mungkin cara jQuery memperlakukannya - saya tidak melihatnya di referensi jQuery Api, dan itu pasti tidak jelas dalam spesifikasi w3c. Karena mendefinisikan JSON dalam objek dom akan merusak 'netralitas' w3c, ini tampaknya merupakan ekstensi jQuery atau, mengingat kurangnya dokumentasi - quirk. Bagaimanapun, meskipun saya tidak bisa mengatakan bahwa saya setuju dengan Anda tentang hal ini - saya tidak terlalu kesal karena saya akan menghapus +1 pertama yang Anda dapatkan. :)

— John Green

@ John itu adalah didokumentasikan dalam API jQuery - "Setiap upaya dilakukan untuk mengkonversi string ke nilai JavaScript (termasuk boolean, nomor, objek, array, dan null) jika dibiarkan sebagai string."

— Alnitak

@Alnitak Maka saya tinggi, karena saya membaca cukup banyak seluruh bagian data dan banyak komentar sebelum posting. Aku bahkan melihat lagi.

— John Green

@Alnitak ok, saya menemukannya dari hasil edit Anda. Ya, ini adalah ekstensi Jquery. Saya akan mengubah posting saya.

— John Green

-2

Seperti orang lain telah mengidentifikasi, nilai diperlakukan sebagai string sehingga mengembalikan "[". Silakan coba ini (aaa adalah nama div dan saya mengeluarkan data-barang):

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

— Raja
sumber

-3

Pendekatan yang berbeda diposting di jsfiddle ;var stuff = $('div').data('stuff');barang adalah string dengan karakter ke-0 sebagai '['

Nah, Anda var stuff = eval($('div').data('stuff'));harus mendapatkan array

— Mayank
sumber

3

eval is evil :) selalu ada cara yang lebih baik

— BYTE RIDER

Harap sesuaikan jawaban Anda untuk mengatakan bahwa, meskipun solusi yang memungkinkan, eval () dapat menyebabkan unicorn mati ... stackoverflow.com/questions/86513/…

— Just Plain High