Skip to content

Instantly share code, notes, and snippets.

@charliepark

charliepark/gist:4266921

Created December 12, 2012 10:58
Show Gist options
  • Save charliepark/4266921 to your computer and use it in GitHub Desktop.
Save charliepark/4266921 to your computer and use it in GitHub Desktop.
Download ZIP
You can use arrays and hashes in HTML5 data attributes. Use JSON.parse, and make sure you're using single quotes around the brackets and double quotes inside the brackets.
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="animals" data-animals='["cat", "dog", "bird"]'></div>
<div id="vehicles" data-vehicles='{"motorcycle":"Harley", "car":"Herbie", "steamshovel":"Mike"}'></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
var a = JSON.parse($('#animals').attr('data-animals'))[0];
$('#animals').html(a);
var v = JSON.parse($('#vehicles').attr('data-vehicles')).car;
$('#vehicles').html(v);
});
</script>
</body>
</html>
@funkatron82
Copy link

You can use the jquery function data instead of parse and attr:

var a = $('#animals').data('data-animals');  //will patse JSON automagically

@Yoelx
Copy link

Yoelx commented Jan 29, 2019

You can indeed retrieve it via the jquery function data, but if you do, you need to lose the data- part of the data-attribute. So in the example:

var a = $('#animals').data('animals'); // not .data('data-animals')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment