michaelp0730
12/12/2012 - 10:58 AM

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 dou

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.

gistfile1.txt
content_copyfile_download
<!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>