How can I get attribute values one by one?

Question

As you see I have more than one data-record-* attribute and I want to get value of these attribute using by each function with the help of jquery.

but I want to get of these value automatically with jquery for example attribute begins with ``data-record`.

I will post these value with jquery/ajax

$('a').on('click',function(){
  var el = $(this).data();
  el.each(function(e){
    alert(el);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-record-id="1" data-record-name="section-1" data-record-order="short" class="ajax">Click on me!</a>

I have attributes on my anchor link and I want to get value of this attribute with each function :) — ani_css, Jun 29 '17 at 10:54
Seems you need a filtered attribute list. Check [this](https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery) — Prashant Shirke, Jun 29 '17 at 10:54

frenchie · Accepted Answer · 2017-06-29T11:00:14.190

1

Just remove the loop; I think this is what you're looking for?

$('a').on('click',function(){
  
  var TheData = $(this).data();

  for (var key in TheData) {

     console.log(TheData[key]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-record-id="1" data-record-name="section-1" data-record-order="short" class="ajax">Click on me!</a>

edited Jun 29 '17 at 11:00

answered Jun 29 '17 at 10:55

frenchie

51,731
109
304
510

if I use like this: `$('a').on('click',function(){ var el = $(this).data(); alert(el) });` this return object object I need one by one with alert or with in a list item doesn't matter I will post these data with ajax that's why I'm asking – ani_css Jun 29 '17 at 10:57
Ah ok, well then see updated answer; once you've got the data in an object, just loop through the keys. Try it; it works. – frenchie Jun 29 '17 at 11:00
work very well so I will try the post this value with ajax is that possible one by one ? so is that correct way `$('a').on('click',function(){ var myData = $(this).data(); $.each( myData, function( index, value ) { $('ul').append("
"+ "index: " + index + "value: " + value+"

ani_css

Jun 29 '17 at 11:06

It could work, hard to say because it depends on how your back-end will process it. But I don't recommend doing it this way because you're making several calls when you could just be making one ajax call. In the loop over the object keys, I'd build an array with the keys of the object and then ajax that array. – frenchie Jun 29 '17 at 13:12

score 1 · Answer 2 · answered Jun 29 '17 at 11:00

1

changed the each function call into jquery.each() - following the jquery documentation for the .obj()

$('a').on('click',function(){
  var myData = $(this).data();
  jQuery.each( myData, function( index, value ) {
  alert( "index: " +  index + "value: " + value );
});
});

just read more on the way it works over here: https://api.jquery.com/Types/#Object

answered Jun 29 '17 at 11:00

errand

980
1
7
18

I have a question can we make this `myData` variables begins with `data-records-` ? – ani_css Jun 29 '17 at 11:49
nope - jquery .data() automatically maps html 5.0 data attributes into camel based names. see https://api.jquery.com/data/#data-html5 for more information – errand Jun 29 '17 at 12:08
no I mean I want to get attribute only begins with ``data-record` isn't that possible ? – ani_css Jun 29 '17 at 12:09
using data functions only returns attributes, that start with data. if you then want to select only variables, that start with 'record' you'd have to use string functions to search the 'index' variable (which is the key) for those values. – errand Jun 29 '17 at 12:53

score 0 · Answer 3 · answered Jun 29 '17 at 11:31

THis will provide you with the JSON object that u can use in UR Ajax call. Alternatively you can replace the prefixes in key as well with 'key.replace'

$('a').on('click',function(){
  
  var TheData = $(this).data();
  var TheJson = "";
  for (var key in TheData) {
  TheJson+='"'+ key+'":"'+TheData[key]+'",';         
  }
  TheJson="{"+TheJson.substr(0,TheJson.length-1)+"}";
  console.log(JSON.parse(TheJson));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-record-id="1" data-record-name="section-1" data-record-order="short" class="ajax">Click on me!</a>

How can I get attribute values one by one?

3 Answers3