A simple JavaScript utility to fetch and parse data attributes from HTML elements. Perfect for modern web development, this utility helps you easily extract custom data attributes and converts them to their respective JavaScript types where possible.
Via NPM:
npm install @frankhoodbs/data-attributes-utils
Here's a basic example on how to use the getDataAttributes
utility:
import { getDataAttributes } from '@frankhoodbs/data-attributes-utils';
const element = document.querySelector('.your-element-class');
const dataAttributes = getDataAttributes(element);
console.log(dataAttributes);
The function will retrieve all data attributes from the provided HTML element and return them as a parsed JavaScript object. If a data attribute contains a stringified JSON, the utility will automatically parse it into its appropriate JS type.
-
el
: The HTML element from which you want to retrieve the data attributes.
Returns a JavaScript object containing the data attributes and their parsed values.
Given the following HTML:
<div
class="example"
data-name="John Doe"
data-age='30'
data-hobbies='["reading", "cycling"]'
>
Example Element
</div>
And the usage:
const element = document.querySelector('.example');
const dataAttributes = getDataAttributes(element);
console.log(dataAttributes);
This will output:
{
name: "John Doe",
age: "30",
hobbies: ["reading", "cycling"]
}