return the element's data attributes in an object

Question

this is my code:

const dataset = (element) => {
  // TODO: return the element's data attributes in an object

};

I need to do this:

Implement the dataset function which takes one element parameter (of type String) and returns an Object with the right keys and values:

const burger = `<div class="card" data-id="42" data-price="15" data-category="popular">
  <div class="card-category">Popular</div>
  <div class="card-description">
    <h2>The best burger in town (15€)</h2>
  </div>
</div>`;

dataset(burger);
// => { id: 42, price: 15, category: 'popular' }

It should only return the dataset of the wrapping element regardless of its children
It should cast the values to the right type (in the example, 42 and 15 should be numbers)

im really new and trying to learn as much as possible i don't have any clue on hoe to do this

See https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js for how to parse the HTML to a DOM element. Then use the `dataset` property to get all the data attributes. — Barmar, Jan 10 '23 at 20:30
There's nothing that will automatically convert the numeric properties to numbers. You'll need to check for that in your code. — Barmar, Jan 10 '23 at 20:36

001 · Answer 1 · 2023-01-10T21:05:20.857

1

You can create an object from that html code then grab the dataset of the first child. While copying that, convert to int.

const burger = `<div class="card" data-id="42" data-price="15" data-category="popular">
  <div class="card-category">Popular</div>
  <div class="card-description">
    <h2>The best burger in town (15€)</h2>
  </div>
</div>`;

const wrapper = document.createElement("div");
wrapper.innerHTML = burger;
const dataset = wrapper.firstElementChild.dataset;
const data = {};
for (const key in dataset) {
  data[key] = isNaN(dataset[key]) ? dataset[key] : Number(dataset[key]);
}
console.log(data);

edited Jan 10 '23 at 21:05

answered Jan 10 '23 at 20:59

001

13,291
5
35
66

I'd use `const data = { ...wrapper.firstElementChild.dataset }` and then subsequently loop over the keys in `data` and use `data[key]` directly. – kelsny Jan 10 '23 at 21:13

score 0 · Answer 2 · answered Jan 10 '23 at 21:06

Simply write this way with reusable approach!

const dataset = ( element ) => {
  let tmpDiv = document.createElement('div');
      tmpDiv.innerHTML = element;
  let res = {
        id: tmpDiv.querySelector('.card').getAttribute('data-id'),
        price: tmpDiv.querySelector('.card').getAttribute('data-price') ,
        category: tmpDiv.querySelector('.card').getAttribute('data-category') 
      }
  return res
};



const burger = `<div class="card" data-id="42" data-price="15" data-category="popular">
  <div class="card-category">Popular</div>
  <div class="card-description">
    <h2>The best burger in town (15€)</h2>
  </div>
</div>`;


console.log( dataset(burger) )

How is this reusable...? It relies on the input to always have an element with a `card` class and only gives you the `id`, `price`, and `category`, which may or may not exist, and may or may not include all the dataset elements. — kelsny, Jan 10 '23 at 21:12

return the element's data attributes in an object

2 Answers2