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?

Answer 1

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>