How to extact the list of values in the data attribute using javascript?

Question

I have a table like this.

<table id="data-grid">
    <thead>
    <tr>
        <td data-field="name">Name</td>
        <td data-field="address1">Address Line 1</td>
        <td data-field="city">City</td>
        <td data-field="state">State</td>
        <td data-field="postalcode">Postal Code</td>
    </tr>
    </thead>
</table>

I want to pull all values in the "data-field". I have used document.getElementById("data-grid").querySelectorAll("td"), which gives an object

{
0: <td data-field="name">
1: <td data-field="address1">
2: <td data-field="city">
3: <td data-field="state">
4: <td data-field="postalcode">
........
}

How to get a list of what is in the data-field like ["name", "address1", "city", "state", "postalcode"]? It can be an object or an array. Either one will work.

Aplet123 · Accepted Answer · 2020-04-25 20:58:29Z

1

You can convert it to an array with Array.from then call .map on it:

Array.from(document.querySelectorAll("#data-grid td")).map(v => v.dataset.field)

(also I changed the selector to #data-grid td to get rid of the getElementById)

answered Apr 25, 2020 at 20:58

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

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

1 Comment

Kallol Nandi Over a year ago

Cannot THANK YOU enough for the solution. I appreciate.

Collectives™ on Stack Overflow

How to extact the list of values in the data attribute using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related