I am attempting to store an array in the HTML data tag. For example:
<div data-locs="{'name':'London','url':'/lon/'},{'name':'Leeds','url':'/lds'}">
I am accessing that data using jQuery. I realise that this is stored as a string, and I've tried various methods to convert it to an array, but I've hit a wall. If you take a look at this jsFiddle page you'll see a full example of what I'm trying to do.
Any ideas?
Thanks!
If you use valid JSON ([ and ] for the array, double quotes instead of single), like this:
<div id="locations" data-locations='[{"name":"Bath","url":"/location/bath","img":"/thumb.jpg"},{"name":"Berkhamsted","url":"/location/berkhamsted","img":"/thumb.jpg"}]'>
Then what you have (using .data()) to get the array will work:
$('#locations').data('locations');
try/catch. EDIT: Nevermind, looks like it's a try/catch.
.data() does the work here, it detects the type...also converts numbers, etc as wellJSON.parse() (and jQuery does this if it's JSON in there), you can see it happening here: github.com/jquery/jquery/blob/master/src/data.js#L203-218.data() knows it is JSON. Answer seems to be that it doesn't do any particular detection. Just takes a stab at it. EDIT: I should clarify that in my original comment I didn't mean jQuery itself was parsing the JSON. It was sloppy wording.
Try adding [ and ] to beginning and end (this makes it valid JSON). After doing so, you can use JSON.parse() to convert it to a native JavaScript object.
[] would blow up, since native JSON.parse needs valid JSON to work, and single quotes aren't it :)
If for whatever reason you insist on using double quotes, you will need to html encode the quotes in your data attribute.
<div data-dwarfs="["Doc", "Sneezy", "Happy"]"></div>
Of course if you have access to PHP or some other pre-processor, you could use something like this:
<?php
$dwarfs = ['Doc', 'Sneezy', 'Happy'];
?>
<div data-dwarfs="<?php echo htmlspecialchars(json_encode($dwarfs), ENT_QUOTES, 'UTF-8') ?>"></div>
<?php
Try this:
var testOne = eval("new Array(" + $('#locations').data('locations') + ")");
Look at it in jsfiddle.
eval() whenever possible. Using actual JSON here is both more correct and faster, why not use correct markup? :)