javascript - How to pass an array into jQuery .data() attribute

Question

Ok so I want to pass a very basic array into a jquery data attrubute server side like so:

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

and then retreive like so:

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

alert(stuff[0]);

Why does this appear to alert '[' and not 'a' (see JSfiddle link)

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

Answer 1

It's treating your variable as a string, the zeroth element of which is [.

This is happening because your string is not valid JSON, which should use double-quotes as a string delimiter instead of single quotes. You'll then have to use single-quotes to delimit the entire attribute value.

If you fix your quotation marks your original code works (see http://jsfiddle.net/ktw4v/12/)

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

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

When jQuery sees valid JSON in a data attribute it will automatically unpack it for you.