CODEWITHSUNDEEP
javascriptjquerycustom-data-attribute
CH_user303
CH_user303

Reputation: 67

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

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?

Upvotes: 1

Views: 165

Answers (4)

Wais Kamal
Wais Kamal

Reputation: 6210

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>

Upvotes: 0

Atmiya Kolsawala
Atmiya Kolsawala

Reputation: 485

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);

Upvotes: 0

Mohammad
Mohammad

Reputation: 21499

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>

Upvotes: 2

Aditya Sharma
Aditya Sharma

Reputation: 663

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
})

Upvotes: 1

Related Questions