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 — Alex K.
– Alex K., Commented Aug 12, 2015 at 13:11
You could try formatting it to JSON from PHP, then have JavaScript parse it. — user3117575
– user3117575, Commented Aug 12, 2015 at 13:15
I would like to go with data-attributes introduced in HTML5. — Mritunjay
– Mritunjay, Commented Aug 12, 2015 at 13:19

machinehead115 · Accepted Answer · 2015-08-12 13:21:40Z

6

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>

answered Aug 12, 2015 at 13:21

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MarmiK · Accepted Answer · 2015-08-12 13:33:05Z

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, 2015 at 13:33

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

answered Aug 12, 2015 at 13:15

Vijaykanth Dondapati

394 bronze badges

Collectives™ on Stack Overflow

Best practice to store array of values in html attr?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related