Loop for each data-attribute on an element and create variables out of it

Question

im trying to loop every data-attributes my element has and store it as variable because it has 17 attr and i dont want 'spam' it.

HTML 
<tr data-a="1" data-b="2" data-c="3" data-d="4"..........>

JS that i dont want
$('.trData').click(function (){
    var a = $(this).attr('data-a');
    var b = $(this).attr('data-b');
    var c = $(this).attr('data-c');
    var d = $(this).attr('data-d');
    var e = $(this).attr('data-e');
..........................

what i have is this but its not working:

$('.trData').click(function () {
    var data = $(this).data();
    for (var i in data) {
        var i = data[i];
    }
});
Desire output
   var a = 1;
    var b = 2;
    var c = 3;

Beware that data() is not just an accessor for data-* properties. — T.J. Crowder
– T.J. Crowder, Commented Apr 22, 2021 at 17:07
Yes i know data has more to it, but i can get the attr value the problem is creating the variables with the name of the data-attr that is in the cycle. — Alexis Garcia
– Alexis Garcia, Commented Apr 22, 2021 at 17:10
Does this answer your question? Get all Attributes from a HTML element with Javascript/jQuery — fdomn-m
– fdomn-m, Commented Apr 22, 2021 at 17:11
Using javascript (not jquery) el.attributes gives you all the attributes, filter them to ones starting with data- — fdomn-m
– fdomn-m, Commented Apr 22, 2021 at 17:12

charlietfl · Accepted Answer · 2021-04-22 17:12:57Z

1

Use selector tr[data-a] then you can get all the data- values in a single object with data() and no arguments

$('tr[data-a]').click(function(){       
   console.log($(this).data());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr data-a="1" data-b="2" data-c="3" data-d="4">
    <td>Item 1</td>
</table>

answered Apr 22, 2021 at 17:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

T.J. Crowder Over a year ago

Just beware that data() is not just an accessor for data-* properties.

T.J. Crowder · Accepted Answer · 2021-04-22 17:37:21Z

0

You'll be glad to hear the DOM has basically done this work for you, and along the way it's removed the data prefix and converted kebab-case to camelCase, etc. It's done that via the dataset property, which is a DOMStringMap:

$(".trData").click(function () {
    for (const [name, value] of Object.entries(this.dataset)) {
        // Here, `name` will be `"a"`, `"b"`, `"c"`, etc., and value will be `"1"`, `"2"`, `"3"`, etc.
        // Note that the values have been magically converted to numbers for you
        console.log(`${name} = ${value}`);
    }
});

Live Example:

$(".trData").click(function () {
    for (const [name, value] of Object.entries(this.dataset)) {
        // Here, `name` will be `"a"`, `"b"`, `"c"`, etc., and value will be `1`, `2`, `3`, etc.
        // Note that the values have been magically converted to numbers for you
        console.log(`${name} = ${value}`);
    }
});

<div class="trData" data-a="1" data-b="2" data-c="3" data-d="4">click me</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you don't want the automatic conversion that dataset does, you can use attributes and filter out the non-data-* attributes:

$(".trData").click(function () {
    const dataAttrs = Array.from(this.attributes)
        .filter(attr => attr.name.startsWith("data-"))
        .map(attr => [attr.name.substring(5), attr.value]);
    for (const [name, value] of dataAttrs) {
        // Here, `name` will be `"data-a"`, `"data-b"`, `"data-c"`, etc., and value will be `"1"`, `"2"`, `"3"`, etc.
        // Note that the values are *strings*
        console.log(`${name} = ${value}`);
    }
});

Live Example:

$(".trData").click(function () {
    const dataAttrs = Array.from(this.attributes)
        .filter(attr => attr.name.startsWith("data-"))
        .map(attr => [attr.name.substring(5), attr.value]);
    for (const [name, value] of dataAttrs) {
        // Here, `name` will be `"data-a"`, `"data-b"`, `"data-c"`, etc., and value will be `"1"`, `"2"`, `"3"`, etc.
        // Note that the values are *strings*
        console.log(`${name} = ${value}`);
    }
});

<div class="trData" data-a="1" data-b="2" data-c="3" data-d="4">click me</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Apr 22, 2021 at 17:37

answered Apr 22, 2021 at 17:11

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

6 Comments

Alexis Garcia Over a year ago

ye that one is running! The other had the this.dataset problem. Thanks dude new thing i have learned today! Awsome!

Alexis Garcia Over a year ago

How do i create the var tho? var ${name} = ${value}; not working and var $name = $value; not working what is the correct syntax?

T.J. Crowder Over a year ago

@AlexisGarcia - You don't, you can't create variables dynamically like that. You can create properties dynamically. If you want to do that, just use this.dataset directly (this.dataset.a, this.dataset.b, etc.).

Alexis Garcia Over a year ago

lol the point of doing this is to creat variables out of data attributes. Imagine i have data-foo="bar" i want to create a var "foo" with value "bar". the problem is that i have 17 of them i dont want to spam lines, i want to do it in a cycle. data-foo2="bar2" data-foo3="bar3" data-foo4="bar4" data-foo5="bar5"... var foo2 = bar2 var foo3 = bar3 var foo4 = bar4 var foo5 = bar5

T.J. Crowder Over a year ago

@AlexisGarcia - :-) In that situation, you don't probably don't want individual variables. (I thought you wanted a loop, from the for (var i in data).)

|

Alexis Garcia · Accepted Answer · 2021-04-22 17:47:54Z

0

Thanks to @charlietfl i got it working.

$("tr[data-a]").click(function () {
    $.each($(this).data(), function (key, value) {
        var key = value;
});

answered Apr 22, 2021 at 17:47

Alexis Garcia

4723 silver badges17 bronze badges

Collectives™ on Stack Overflow

Loop for each data-attribute on an element and create variables out of it

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related