Why is my .data() function returning [ instead of the first value of my array?

Question

I want to pass an array into a jQuery data attribute on the server side and then retrieve it like so:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<div data-stuff="['a','b','c']"></div>

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

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

Alnitak · Accepted Answer · 2013-12-20T18:08:34.327

150

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.

edited Dec 20 '13 at 18:08

answered May 20 '11 at 12:07

Alnitak

334,560
70
407
495

5

infact, ['a','b','c'] is NOT a valid JSON ;) – stecb May 20 '11 at 12:15
2

['a','b','c'] is not valid JSON – Mutt May 20 '11 at 12:15
What should the JSON look like? – wilsonpage May 20 '11 at 12:16
5

It should use double quotes, but then you'd have to use single quotes to enclose the HTML attribute. – Alnitak May 20 '11 at 12:16
@Allen my original answer didn't spot the invalid JSON problem – Alnitak May 20 '11 at 12:50
Ah, well they should fix it because it does now :) Glad someone knew the answer to this, it would have bugged me all day – Allen Rice May 20 '11 at 13:21
1

@JoeBrockhaus they're both delimiters - quote marks are "string delimiters" and commas are "record delimiters". Only the former are relevant to the OP's question. – Alnitak Dec 20 '13 at 18:08
1

This also works: `
` – draganHR Dec 17 '14 at 16:54

John Green · Answer 2 · 2011-05-20T13:03:42.233

16

Declaring it as an attribute means that it is a string.

So stuff[0] would be equivalent to: var myString = "['a','b','c']"; alert(myString[0]);

You need to make it look like this:

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

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

Retraction: jQuery's parsing fails because it didn't meet the rules of parseJSON.

However, I will stand behind my solution. There are aspects of the others that are less than ideal, just as this solution is less than ideal in some ways. All depends on what your paradigms are.

edited May 20 '11 at 13:03

answered May 20 '11 at 12:09

John Green

13,241
3
29
51

4

no, declaring it as invalid JSON means that it's treated as a string. – Alnitak May 20 '11 at 12:33
@Alnitak - Although that may very well be the way that jQuery treats it -- I don't see that in the jQuery Api reference, and it most certainly isn't clear in the w3c spec. As defining JSON in a dom object would break the w3c's 'neutrality', this appears to be a jQuery extension or, given the lack of documentation -- quirk. At any rate, although I can't say that I agree with you on this point -- I'm not so peeved that I'm going to remove that first +1 you got. : ) – John Green May 20 '11 at 12:48
@John it _is_ documented in the jQuery API - "Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string." – Alnitak May 20 '11 at 12:51
@Alnitak Then I'm high, because I read pretty much the entire data section and many of the comments before posting. I just looked again even. – John Green May 20 '11 at 12:55
@Alnitak ok, I found it from your edit. Yes, this is a Jquery extension. I'll ammend my post. – John Green May 20 '11 at 12:58
@Alnitak - And in my defense... this was buried in the 4th paragraph of the 2nd-form description. : ) – John Green May 20 '11 at 13:07
I'm choosing this as the answer, because this will also simplify the html by removing the square bracket and double quotes. But also because I don't like using single quotes for attributes (dumb reason, since it's acceptable HTML). – b01 Sep 21 '12 at 20:45

score -3 · Answer 3 · edited Sep 03 '12 at 01:37

-3

As others have identified the value is treated as string so it is returning "[". Please try this (aaa is the name of the div and I took out the data-stuff):

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

edited Sep 03 '12 at 01:37

alex

479,566
201
878
984

answered May 20 '11 at 12:23

Raja

3,608
3
28
39

score -4 · Answer 4 · answered May 20 '11 at 12:11

-4

A different approach is posted at jsfiddle; var stuff = $('div').data('stuff'); stuff is a string with 0th character as '['

Well, var stuff = eval($('div').data('stuff')); should get you an array

answered May 20 '11 at 12:11

Mayank

5,454
9
37
60

3

eval is evil :) there is always a better way – BYTE RIDER Feb 28 '14 at 14:03
Please adjust your answer to say that, although a possible solution, eval() might cause unicorns to die... http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – Aug 05 '14 at 15:25

Why is my .data() function returning [ instead of the first value of my array?

4 Answers4

Linked