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**](https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does/45149219#45149219) just an accessor for `data-*` properties. — T.J. Crowder, Apr 22 '21 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, Apr 22 '21 at 17:10
Does this answer your question? [Get all Attributes from a HTML element with Javascript/jQuery](https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery) — freedomn-m, Apr 22 '21 at 17:11
Using javascript (not jquery) `el.attributes` gives you all the attributes, filter them to ones starting with `data-` — freedomn-m, Apr 22 '21 at 17:12

score 1 · Accepted Answer · answered Apr 22 '21 at 17:12

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 '21 at 17:12

charlietfl

170,828
13
121
150

1

Just beware that `data()` [is **not**](https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does/45149219#45149219) just an accessor for `data-*` properties. – T.J. Crowder Apr 22 '21 at 17:15

T.J. Crowder · Answer 2 · 2021-04-22T17:37:21.620

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>

ye that one is running! The other had the `this.dataset` problem. Thanks dude new thing i have learned today! Awsome! — Alexis Garcia, Apr 22 '21 at 17:16
How do i create the var tho? `var ${name} = ${value}; not working` and `var $name = $value; not working` what is the correct syntax? — Alexis Garcia, Apr 22 '21 at 17:21
@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.). — T.J. Crowder, Apr 22 '21 at 17:26
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` — Alexis Garcia, Apr 22 '21 at 17:34
@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)`.) — T.J. Crowder, Apr 22 '21 at 17:38
well i got it to work `$("tr[data-a]").click(function () { $.each($(this).data(), function (key, value) { var key = value; });` Thanks for the help — Alexis Garcia, Apr 22 '21 at 17:46

score 0 · Answer 3 · answered Apr 22 '21 at 17:47

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 '21 at 17:47

Alexis Garcia

452
3
15

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

3 Answers3