How to get data attribute of elements in object using jquery?

Question

I have a loop of buttons which is compiling like this

<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

In Jquery I am geeting the data as this

let cat1 = $('#cat1').data('cat');
let cat2 = $('#cat2').data('cat');
let cat3 = $('#cat3').data('cat');

but this is hard coding as I know that there are these 3 ids. I want to create an object and make this thing dynamically. How to do that?

What you actually want to do with this? Can you please explain — Jagjeet Singh
– Jagjeet Singh, Commented Oct 8, 2018 at 9:29
you can use class instead of id's and then loop through all buttons having that class and get your data attr — Arun Kumar
– Arun Kumar, Commented Oct 8, 2018 at 9:30

Mohammad · Accepted Answer · 2018-10-08 09:33:27Z

2

Create an object and then loop through elements using .each() and in loop add value of data-cat to object.

var cats = {};
$("#cat1, #cat2, #cat3").each(function(){
  cats[this.id] = $(this).data("cat");
});
console.log(cats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

answered Oct 8, 2018 at 9:33

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

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

Comments

Aditya Sharma · Accepted Answer · 2018-10-08 09:32:53Z

1

Identify them by some class, I have used attribute selector for now

let arr = [];
jQuery("[data-cat]").each(function(){
  var $elt = jQuery(this);
  arr.push($elt.data(cat));//Or any other operation to be performed
})

answered Oct 8, 2018 at 9:32

Aditya Sharma

6532 gold badges13 silver badges31 bronze badges

Comments

Atmiya Kolsawala · Accepted Answer · 2018-10-08 09:38:14Z

0

Add one new class in all button dev_class. And try below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-line btn btn-info btn-sm dev_class" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm dev_class" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm dev_class" id="cat3" data-cat="[10,11]">cat3</button>


// Gets the number of elements with class dev_class
var numItems = $('.dev_class').length;
var vars = {};
var newCount = 0;
$('.dev_class').each(function(){
    newCount++;
  vars['cat' + newCount] =  $('#cat'+newCount).data('cat');
});
console.log(vars);

answered Oct 8, 2018 at 9:38

Atmiya Kolsawala

4854 silver badges12 bronze badges

Comments

Wais Kamal · Accepted Answer · 2018-10-08 09:42:06Z

If I get you correctly, you are trying to put them in an object. Assuming you know the number of buttons, this would do the job:

var buttons = {};
var btncount = 3; // This is the number of buttons

for(var i = 1; i <= btncount; i++) {
  buttons["cat" + i] = $("#cat" + i).data("cat");
}

console.log(buttons);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

Assuming you don't know how many buttons are there, and all buttons have the add-line, btn, btn-info and btn-sm classes, you can do this:

var buttons = {};
var btncount = $(".add-line.btn.btn-info.btn-sm").length; // This is the number of buttons

for(var i = 1; i <= btncount; i++) {
  buttons["cat" + i] = $("#cat" + i).data("cat");
}

console.log(buttons);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add-line btn btn-info btn-sm" id="cat1" data-cat="[1,2,3,4,5,6,7]">cat1</button>
<button class="add-line btn btn-info btn-sm" id="cat2" data-cat="[8,9]">cat2</button>
<button class="add-line btn btn-info btn-sm" id="cat3" data-cat="[10,11]">cat3</button>

Collectives™ on Stack Overflow

How to get data attribute of elements in object using jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related