Get list of data- attributes using javascript jQuery

Question

Given an arbitrary HTML element with zero or more data-  attributes  how can one retrieve a list of key-value pairs for the data   E g  given this    lt div id  prod  data-id  10  data-cat  toy  data-cid  42  gt blah lt  div gt    I would like to be able to programmatically retrieve this      id  10   cat   toy    cid  42     Using jQuery  v1 4 3   accessing the individual bits of data using   data   is simple if the keys are known in advance  but it is not obvious how one can do so with arbitrary sets of data   I m looking for a  simple  jQuery solution if one exists  but would not mind a lower level approach otherwise  I had a go at trying to to parse     prod   attributes but my lack of javascript-fu is letting me down   update  customdata does what I need  However  including a jQuery plugin just for a fraction of its functionality seemed like an overkill    Eyeballing the source helped me fix my own code  and improved my javascript-fu    Here s the solution I came up with   function getDataAttributes node        var d                re dataAttr     data -               each node get 0  attributes  function index  attr            if  re dataAttr test attr nodeName                 var key   attr nodeName match re dataAttr  1               d key    attr nodeValue                         return d      update 2  As demonstrated in the accepted answer  the solution is trivial with jQuery    1 4 4       prod   data   would return the required data dict

User · Answer

As mentioned above modern browsers have the The HTMLElement.dataset API.
That API gives you a DOMStringMap, and you can retrieve the list of data-* attributes simply doing:

var dataset = el.dataset; // as you asked in the question

you can also retrieve a array with the data- property's key names like

var data = Object.keys(el.dataset);

or map its values by

Object.keys(el.dataset).map(function(key){ return el.dataset[key];});
// or the ES6 way: Object.keys(el.dataset).map(key=>{ return el.dataset[key];});

and like this you can iterate those and use them without the need of filtering between all attributes of the element like we needed to do before.

User · Answer

Actually  if you re working with jQuery  as of version 1 4 3 1 4 4  because of the bug as mentioned in the comments below   data-  attributes are supported through  data         As of jQuery 1 4 3 HTML 5 data-   attributes will be automatically   pulled in to jQuery s data object       Note that strings are left intact   while JavaScript values are converted   to their associated value  this   includes booleans  numbers  objects    arrays  and null   The data-   attributes are pulled in the first   time the data property is accessed and   then are no longer accessed or mutated    all data values are then stored   internally in jQuery     The jQuery fn data function will return all of the data- attribute inside an object as key-value pairs  with the key being the part of the attribute name after data- and the value being the value of that attribute after being converted following the rules stated above    I ve also created a simple demo if that doesn t convince you  http   jsfiddle net yijiang WVfSg

User · Answer

you could access the data using     prod   0  dataset

User · Answer

I use nested each - for me this is the easiest solution  Easy to control change  what you do with the values - in my example output data-attributes as ul-list   Jquery Code    x000D   x000D  var model       model    x000D   x000D  var ul       lt ul gt    appendTo  body    x000D   x000D    model  each function index  item    x000D    ul append   document createElement  li    text   this  text      x000D      each   this  data    function key  value    x000D      ul append   document createElement  strong    text key          value    x000D      ul append   document createElement  br      x000D          inner each x000D    ul append   document createElement  hr      x000D         outer each x000D   x000D    print html   x000D  var htmlString      ul   html    x000D     code   text htmlString   x000D   lt script src  https   cdnjs cloudflare com ajax libs prism 1 17 1 prism min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs prism 1 17 1 themes prism-okaidia min css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt h1 id  demo  gt  lt  h1 gt  x000D   x000D   lt ul gt  x000D     lt li class  model  data-price  45   data-location  Italy  data-id  1234  gt Model 1 lt  li gt  x000D     lt li class  model  data-price  75   data-location  Israel  data-id  4321  gt Model 2 lt  li gt   x000D     lt li class  model  data-price  99   data-location  France  data-id  1212  gt Model 3 lt  li gt   x000D   lt  ul gt  x000D   x000D   lt pre gt  x000D   lt code class  language-html  gt  x000D     x000D   lt  code gt  x000D   lt  pre gt  x000D   x000D   lt h2 gt Generate list by code lt  h2 gt  x000D   lt br gt  x000D   x000D   x000D    Codepen  https   codepen io ezra siton pen GRgRwNw editors 1111

User · Answer

You can just iterate over the data attributes like any other object to get keys and values  here s how to do it with   each         each     myEl   data    function key  value            console log key           console log value

User · Answer

Have a look here   If the browser also supports the HTML5 JavaScript API  you should be able to get the data with   var attributes   element dataset   or  var cat   element dataset cat   Oh  but I also read      Unfortunately  the new dataset property has not yet been implemented in any browser  so in the meantime it   s best to use getAttribute and setAttribute as demonstrated earlier    It is from May 2010     If you use jQuery anyway  you might want to have a look at the customdata plugin  I have no experience with it though

User · Answer

You should be get the data through the dataset attributes  var data   element dataset    dataset is useful tool for get data-attribute

User · Answer

or convert gilly3 s excellent answer to a jQuery method     fn info   function          var data              forEach call this get 0  attributes  function  attr            if    data-  test attr name                 var camelCaseName   attr name substr 5  replace  -    g  function   0   1                    return  1 toUpperCase                                data camelCaseName    attr value                        return data      Using      foo   info

User · Answer

One way of finding all data attributes is using element attributes  Using  attributes  you can loop through all of the element attributes  filtering out the items which include the string  data-     let element   document getElementById  element     function getDataAttributes element       let elementAttributes               i   0       while i  lt  element attributes length           if element attributes i  name includes  data-                 elementAttributes element attributes i  name    element attributes i  value                   i               return elementAttributes

User · Answer

A pure JavaScript solution ought to be offered as well  as the solution is not difficult   var a      filter call el attributes  function at    return   data-  test at name         This gives an array of attribute objects  which have name and value properties   if  a length        var firstAttributeName   a 0  name      var firstAttributeValue   a 0  value      Edit  To take it a step further  you can get a dictionary by iterating the attributes and populating a data object   var data          forEach call el attributes  function attr        if    data-  test attr name             var camelCaseName   attr name substr 5  replace  -    g  function   0   1                return  1 toUpperCase                        data camelCaseName    attr value              You could then access the value of  for example  data-my-value  2  as data myValue   jsfiddle net 3KFYf 33  Edit  If you wanted to set data attributes on your element programmatically from an object  you could   Object keys data  forEach function key        var attrName    data-    key replace   A-Z  g  function  0            return  -     0 toLowerCase                el setAttribute attrName  data key          jsfiddle net 3KFYf 34  EDIT  If you are using babel or TypeScript  or coding only for es6 browsers  this is a nice place to use es6 arrow functions  and shorten the code a bit   var a      filter call el attributes  at   gt    data-  test at name

[javascript] Get list of data-* attributes using javascript / jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to attributes