Best practice to store array of values in html attr?

Question

What is the best practice to store an array of values in a html (from php) attribute and later access them from javascript/jQuery?

<div class="storage" someAttr=?? /></div>

Its basically a simple array like (code_1,code_2,code_3,...)
Im thinking of doing a simple someAttr="code_1;code_2;code_3" and then exploding it:

      var a = $(this).attr('someAttr');
      (a.split(";")).forEach(function (attr){
        console.log(attr);
      });

`data` selectors, E.g: [jQuery selectors on custom data attributes using HTML5](http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5) — Alex K., Aug 12 '15 at 13:11
You could try formatting it to JSON from PHP, then have JavaScript parse it. — , Aug 12 '15 at 13:15
I would like to go with [*data-attributes*](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) introduced in HTML5. — Mritunjay, Aug 12 '15 at 13:19

score 6 · Accepted Answer · answered Aug 12 '15 at 13:21

You can json_encode your array on the PHP side, add it in as a data-attribute on the HTML side, and then parse it out on the JavaScript side.

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
      $(document).ready(function() {
        var jsArr = JSON.parse($('#phpArr').attr('data-attr'));
      });
    </script>
  </head>

  <body>
    <span id="phpArr" data-attr='<?php echo json_encode(arr); ?>'></span>
  </body>

</html>

score 0 · Answer 2 · edited Aug 12 '15 at 13:33

0

You can store like this in html attribute then you can split that into array using JavaScript with help of Substring functions

<li  id="P01[01]"></li>

edited Aug 12 '15 at 13:33

MarmiK

5,639
6
40
49

answered Aug 12 '15 at 13:15

Vijaykanth Dondapati

39
4

Best practice to store array of values in html attr?

2 Answers2