Array build with map returning `undefined` when selecting element attribute

Question

I am trying to create an array with only the attribute data-id of each elements but getting an undefined array. What am I doing wrong ?

The declaration: var list = [...document.querySelectorAll("#selection > tr")].map(el => el["data-id"]);

The elements:

<tbody id="selection">
  {% for form in formset %}
    <tr data-id={{form.instance.id}}>
    </tr>
  {% endfor%}
</tbody>

thank you

[Datasets](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset) might be more appropriate, e.g. `element.dataset[keyname]` (or `el => el.dataset.id` in your case) — Yoshi, Apr 21 '20 at 06:39

score 2 · Accepted Answer · answered Apr 21 '20 at 06:45

2

data-* attributes are accessed in JS code using .dataset.* (in your case .dataset.id)

final code should be

var list = [...document.querySelectorAll("#selection > tr")].map(el => el.dataset.id);

check out data-*

answered Apr 21 '20 at 06:45

Cedric Cholley

score 1 · Answer 2 · answered Apr 21 '20 at 06:35

1

var list = [...document.querySelectorAll("#selection > tr")].map(el => el.getAttribute("data-id"));

answered Apr 21 '20 at 06:35

Beingnin

2 Answers2